• 0
Sign in to follow this  
Followers 0

Modified h1, h2 etc... in chrome

Question

Posted · Report post

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

7 answers to this question

  • 0

Posted · Report post

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.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

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 ?

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

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
  • 0

Posted · Report post

Add the following to your custom fonts CSS:

 

font-variant: normal;

 

This should resolve the issue.

 

http://d.pr/i/ngRb

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

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

Keith

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

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
  • 0

Posted · Report post

No worries :D

1 person likes this

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!


Register a new account

Sign in

Already have an account? Sign in here.


Sign In Now
Sign in to follow this  
Followers 0