Google font doesn't load properly in Chrome

Question

I am developing a website with the "Ubuntu Condensed" font from Google Fonts. Sometimes when I navigate through subpages my navigation menu changes its style to either a different font or a different style. Sometimes other text on my website changes its font or special characters (Polish) are rendered in a different font.

I realized it's something wrong with Chrome, because whenever I bring up the element inspector and disable/enable a CSS rule everything goes back to normal. Chrome seems to be loading the CSS too late.

I tried the font fix for the Chrome bug but it doesn't work at all. Nothing helps. Firefox displays everything properly though.

Shouldn't the title be "Google Font not loading properly in Chrome"? Have you checked for any console errors? What about the Network tab in Chrome devtools? Is it loading fine in other browsers? — Aziz, Feb 17 '16 at 11:18
@aziz No console errors, it's loading properly in Firefox. I will check the Network tab. — NakedCat, Feb 17 '16 at 11:21
The css may be loaded in time, but then the font needs to be loaded too. This is a separate file. After that, the page needs to be re-rendered. On many site you see this going 'wrong' in a sense that a font changes once, or sometimes a couple of times during loading. And Chrome is the new IE. ;-) — GolezTrol, Feb 17 '16 at 11:22
It may be either cache problem - check your site in Incognito Mode (Ctrl + Shift + N) or loading priority - how do you import said fonts? — Johnny, Feb 17 '16 at 11:27
How are you implementing the google font into your website? If you are using the standard `` then make sure google font link comes BEFORE your main CSS link. — Aziz, Feb 17 '16 at 11:28
@Aziz I am implementing it BEFORE my main CSS. I am using WordPress's wp_enqueue_style() function to make sure that it happens in that order. — NakedCat, Feb 17 '16 at 11:36
@Aziz Here is the URL: http://peter.la-bros.com/creative_challenge/ fiddle around with the navigation menu at the top. Click those links many times until the navigation menu changes its look. It shouldn't take more than 20 clicks. — NakedCat, Feb 17 '16 at 12:03
@Aziz the navigation menu seems to be stable now, but I see that the overall page loading time is bigger, so I suppose that's why. The sidebar in the "Media" subpage however still loses styling on it's special character in the word "Zdjęcia". — NakedCat, Feb 17 '16 at 12:09

score 2 · Answer 1 · edited May 23 '17 at 12:19

Two problems there:

1) It's seems there's a conflict with local font: Google Webfont conflict with local font, so the first step it's to import the Ubuntu Condensed like a local font:

@font-face {
          font-family: 'UbuntuC';
          font-style: normal;
          font-weight: 700;
          src: @import url(https://fonts.googleapis.com/css?family=Ubuntu+Condensed);
        }

2) I've tried without css links and it works, but the html5blank css files change the body font property, you have to change these rules or add important:

@font-face {
          font-family: 'UbuntuC';
          font-style: normal;
          font-weight: 700;
          src: @import url(https://fonts.googleapis.com/css?family=Ubuntu+Condensed);
        }

        body {
            font-family: 'UbuntuC', sans-serif !important;
        }

Tested in Chrome, OS X

score 1 · Answer 2 · edited May 23 '17 at 12:22

1

The issue might be caused by not including the extended latin subset of the font, thus causing weird rendering of certain characters, I would recommend adding the subset for better compatibility.

Add this to your header and make sure it is before any CSS file:

<link href='https://fonts.googleapis.com/css?family=Ubuntu+Condensed&subset=latin,latin-ext' rel='stylesheet' type='text/css'>

CSS rule

font-family: 'Ubuntu Condensed', sans-serif;

I would personally go with the Google CDN instead of downloading the font and loading it locally, for more in-depth details on that, read: webfonts vs. local fonts

edited May 23 '17 at 12:22

Community

1
1

answered Feb 17 '16 at 12:22

Aziz

7,685
3
31
54

1

The thing is - try clicking and unclicking any of the CSS rules in your Chrome devTools. After such action the special character goes back to the correct font. Plus, I started with the google CDN, but switched to local fonts to see if it's going to solve the bug. – NakedCat Feb 17 '16 at 12:26
have you tried again with the extended latin subset? – Aziz Feb 17 '16 at 12:30

score 1 · Answer 3 · answered Mar 04 '16 at 02:02

1

Delete this from your stylesheet:

text-rendering: optimizeLegibility;

This is a bug in Chrome, I just noticed it the last few months.

answered Mar 04 '16 at 02:02

swt83

2,001
4
25
33

score 0 · Answer 4 · answered Mar 03 '16 at 09:38

0

Copy and paste this code into HTML header fonts will be loaded automatically when you have internet access

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

answered Mar 03 '16 at 09:38

user25775

71
1
10

Google font doesn't load properly in Chrome

4 Answers4