Myfonts integration

[kgeee]

Hi

I’m trying to integrate Gill Sans from Myfonts.com

The CSS is loaded fine. But the following gets printed in the HTML and takes priority over the CSS in the child theme

/*========== Web Font Styles ==========*/
body, h6, #sidebar .widget-heading h3, #header-search input, .header-items h3.phone-number, .related-wrap h4, #comments-list > h3, .item-heading h1, .sf-button, button, input[type="submit"], input[type="email"], input[type="reset"], input[type="button"], .spb_accordion_section h3, #header-login input, #mobile-navigation > div, .search-form input, input, button, select, textarea {font-family: "Helvetica", Palatino, Arial, Helvetica, Tahoma, sans-serif;}
h1, h2, h3, h4, h5, .custom-caption p, span.dropcap1, span.dropcap2, span.dropcap3, span.dropcap4, .spb_call_text, .impact-text, .testimonial-text, .header-advert {font-family: "Helvetica", Palatino, Arial, Helvetica, Tahoma, sans-serif;}
nav .menu li {font-family: "Helvetica", Palatino, Arial Helvetica, Tahoma, sans-serif;}
body, p, .masonry-items .blog-item .quote-excerpt, #commentform label, .contact-form label {font-size: 14px;line-height: 22px;}
h1, .spb_impact_text .spb_call_text, .impact-text {font-size: 24px;line-height: 34px;}
h2 {font-size: 20px;line-height: 30px;}
h3 {font-size: 18px;line-height: 24px;}
h4, .body-content.quote, #respond-wrap h3 {font-size: 16px;line-height: 20px;}
h5 {font-size: 14px;line-height: 18px;}
h6 {font-size: 12px;line-height: 16px;}
nav .menu li {font-size: 14px;}

This is the site: http://loveafox.dk/TheProteinKitchen/

This is the CSS from my childtheme

body, p {

	font-family: GillSansMTStd-Medium !important, sans-serif;
	font-weight: normal; 
	font-style: normal; 
}

Any ideas on how to get it to work?

[Mohammad – SUPPORT]

Hi,
I see that you dont have font face code to load custom fonts for browsers like this:-

@font-face {
    font-family: myFirstFont;
    src: url(sansation_light.woff);
}

Thanks
Mohammad

[kgeee]

Hi

Yes. They are there and the fonts are loading fine. If you use firebug and turn of the Helvetica font, Gill Sans is displaying fine.

The problem is the the fonts that are in the html as /*========== Web Font Styles ==========*/. These overrule the Gill Sans font.

/* @import must be at top of file, otherwise CSS will not work */
@import url("//hello.myfonts.net/count/2dabba");

  
@font-face {font-family: 'GillSansMTStd-Medium';src: url('webfonts/2DABBA_0_0.eot');src: url('webfonts/2DABBA_0_0.eot?#iefix') format('embedded-opentype'),url('webfonts/2DABBA_0_0.woff2') format('woff2'),url('webfonts/2DABBA_0_0.woff') format('woff'),url('webfonts/2DABBA_0_0.ttf') format('truetype');}
 
  
@font-face {font-family: 'GillSansMTStd-Bold';src: url('webfonts/2DABBA_1_0.eot');src: url('webfonts/2DABBA_1_0.eot?#iefix') format('embedded-opentype'),url('webfonts/2DABBA_1_0.woff2') format('woff2'),url('webfonts/2DABBA_1_0.woff') format('woff'),url('webfonts/2DABBA_1_0.ttf') format('truetype');} 

[Mohammad – SUPPORT]

Hi,
Please use this custom css code at Admin -> Theme Options -> Custom CSS code :-

body, p {

    font-family: GillSansMTStd-Medium , sans-serif !important;
    font-weight: normal; 
    font-style: normal; 
}

Thanks
Mohammad

[Rui Guerreiro – SUPPORT]

Hi,

Try instead this

body, p {

    font-family: "GillSansMTStd-Medium, sans-serif"!important;
    font-weight: normal; 
    font-style: normal; 
}

-Rui

[kgeee]

Hi Rui

This doesn’t work either unfortunately. See attached. The style still gets overruled.

Attachments:

You must be logged in to view attached files.

[Rui Guerreiro – SUPPORT]

if you notice the screenshot it’s different from the code I provided.

The !important tag was in a wrong position. try again the code I provided and clear the browser cache and try again.

If doesn’t work provide me admin access.

-Rui

[kgeee]

Hi Rui

THANK you. It worked. Just had to remove the quotation marks.

Thank you for your time. Appreciate it!

[Kyle – SUPPORT]

Ok great, thanks Rui