Google font not loading for some words

  • Resolved nsackman

    (@nsackman)


    9 years ago

    Hello!

    I’m having an issue when I refresh my website. Some of my headings that use a google font are not showing up with that font. The weird thing is that some of the words in the heading are correct and some aren’t. It doesn’t happen on every reload but on some. See this image:

    https://i.imgur.com/0rWRHew.png

    website: https://staging.2dudes.io/fielding

    The font: https://fonts.googleapis.com/css?family=Righteous

    I had this in my functions.php file before my css file:

    wp_enqueue_style( 'righteous_font', 'https://fonts.googleapis.com/css?family=Righteous' );

    That didn’t work so I commented it out and added this to the very top of my CSS file:

    @import url(https://fonts.googleapis.com/css?family=Righteous);

    This is the CSS code:

    h1,h2,h3,h4,h5,h6 {
	font-family: 'Righteous', cursive;
	font-weight: 400;
	line-height: 1.0;
}

    I haven’t tried downloading the font and hosting it on the server yet. But I feel like I had it right the first time and now I’m going away from the proper way to do things.

    Any other suggestions?

Viewing 8 replies - 1 through 8 (of 8 total)
  • Thread Starter nsackman

    (@nsackman)

    I can add that it doesn’t happen as much on desktop. Mostly on mobile. And it seems to fix itself when refreshing but occurs more often when you click the logo to go to the home page.

    I have inspected the page when the issue occurs and I can see that the CSS for the H1 does show the font-family: Righteous.

    GuitarKat

    (@guitarkat)

    I’m having the same issue. Sometimes it works and sometimes it doesn’t on words within the same tag (which you would think would load at the same time), but I don’t know fully how Google fonts renders it’s font for webpages.

    I’m wondering if it could be a network issue? Seeing that on mobile that it happens more, and it could be due to slower network or too much data needing to be rendered on the load too much and therefore should be prioritized over other content?

    Thread Starter nsackman

    (@nsackman)

    That could be correct GuitarKat. I have seen it happen on a computer before. I’m wondering if its because home network isn’t the fastest?

    I did try it cellular data on my phone and still have the problem.

    I did download the files and host them on the server and it still has the problem.

    I am not experiencing the issue with Firefox mobile browser though I am seeing it in Opera.

    Susan Langenes

    (@susanlangenes)

    I just looked at the load time of the various resources on your home page, and there’s a font (Open Sans) being called from Google which was just about the fastest thing to load. Lots of other stuff took ages.

    Have you tried including the font via a link tag in header.php?

    <link href='https://fonts.googleapis.com/css?family=Righteous' rel='stylesheet' type='text/css'>
    Thread Starter nsackman

    (@nsackman)

    Hey Susan,

    That’s how I had it it originally with this:

    wp_enqueue_style( 'righteous_font', 'https://fonts.googleapis.com/css?family=Righteous' );

    That’s when I first started seeing the issue. That is how the Open Sans is being set up currently.

    Thread Starter nsackman

    (@nsackman)

    I put the code directly in my header.php file:

    <link href='https://fonts.googleapis.com/css?family=Righteous' rel='stylesheet' type='text/css'>

    The font is the first thing to load according to the network tab in chrome inspector.

    Still running into the issue.

    I talked to my hosting service tech support. They were also able to repeat the issue but said that it’s not related to my server.

    Anyone have some other suggestions?

    Thread Starter nsackman

    (@nsackman)

    Found this today. It was posted a few days ago. Looks like Foundation has text-rendering: optimizeLegibility; set by default. I set it to auto for my H1-H6. Appears to have fixed the issue.

    Hey nsackman. That looks familiar and may have been causing some of my issues. However, I ended up taking a different approach.

Viewing 8 replies - 1 through 8 (of 8 total)
  • The topic ‘Google font not loading for some words’ is closed to new replies.