Jump to content

Archived

This topic is now archived and is closed to further replies.

Keith Vaugh

Modified h1, h2 etc... in chrome

Recommended Posts

Keith Vaugh+    14
Keith Vaugh

Hi 

Is anyone award of issues with modified titles displaying incorrectly in Google Chrome? 

 

From what I can see on my site https://www.magva.com the h1, h2 etc... are selecting the fallback font when displaying.

 

Where I have custom ID defined it works fine... In other browsers, Safari and Firefox the issue does not exist. Up untill recently it was working fine in Chrome also. The custom CSS I have used is:

/* @font-face kit by Fonts2u */ 
@font-face {
    font-family:"Melbourne";
    src: url("https://www.magva.com/MelbourneFont/Melbourne_reg.eot?") format("eot"),
    url("https://www.magva.com/MelbourneFont/Melbourne_reg.woff") format("woff"),
    url("https://www.magva.com/MelbourneFont/Melbourne_reg.ttf") format("truetype"),
    url("https://www.magva.com/MelbourneFont/Melbourne_reg.svg#Melbourne") format("svg");
}

.customp {
font-family: 'Melbourne', sans-serif;
font-weight: 500;
font-style: normal;
line-height: 100%;
color: #3c131e;
}

h1 a {
font-family: 'Melbourne', sans-serif;
font-size: 22.4px;
font-weight: 500;
color: #925c21;
font-style: normal;
  text-rendering: auto;
} 

Thanks

 

Share this post


Link to post
Share on other sites
Danny    1,327
Danny

Hi,

 

Where are these header tags which do not display your custom font ? When I view your site in Chrome they appear to be using the custom font ?


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
Keith Vaugh+    14
Keith Vaugh

Hi Danny

 

Thanks for looking. Here is where the H1 and H2's should be https://www.magva.com/Homepage.jpg

 

The custom font is showing up correctly ("the vintage Craft of letterpress" and "create a lasting...."). Virtually the same CSS has been used for the H1, H2 and H4.

 

The H1 and H2 appear fine in other browsers and were working in chrome up to the last few days.

 

Thanks

Keith

Share this post


Link to post
Share on other sites
Danny    1,327
Danny

Add the following to your custom fonts CSS:

 

font-variant: normal;

 

This should resolve the issue.

 

http://d.pr/i/ngRb


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
Keith Vaugh+    14
Keith Vaugh

Just tried it, no change. It seems to calling a fall back font!

Keith

Share this post


Link to post
Share on other sites
Danny    1,327
Danny

It is using the correct font as far as I can tell, its just that there is the following being loaded which seems to be effecting your custom font.

 

.thead, h1, h2, h3, h4, h5, h6, .site-title {
font-family: Georgia, "Times New Roman", Times, serif;
font-variant: small-caps;
}
 
If you disable the font-variant: small-caps; in your Chrome web dev tools, the fonts then looks the same as it does in FireFox (Safari for me looks the same as Chrome)
 
So adding the code I provided, should resolve the issue, I also can't see it in your custom fonts code when viewing your site.

Please search our forums, before posting!

Share this post


Link to post
Share on other sites
Keith Vaugh+    14
Keith Vaugh

Danny, I have said it many times before, you are an absolute champ. I don't know were I'd be without you and the rest of the crew on forum. While my CSS is still rusty I have learnt so much from everyone. 

 

I adapted what you provided to: 

.thead, h1, h2, h3, h4, h5, h6, .site-title {
font-family: 'Melbourne', sans-serif;
font-variant: normal;
}

and that has done the trick. Order has been restored to the site. 

Thank you

Share this post


Link to post
Share on other sites
Danny    1,327
Danny

No worries :D

  • Like 1

Please search our forums, before posting!

Share this post


Link to post
Share on other sites

×