Google Fonts (Lato) not rendering on Google Chrome

Question

When I load the website in Google Chrome, texts using Lato font are NOT displayed randomly (in modals, or navigation header links). After I hover the styled link, or retrigger any CSS property in Inspector - texts become visible.

I have tried different solutions like this, but didn't work for me.

I'm loading the fonts locally. Here is my font scss:

// Lato
//
// The Lato font in a Sass format to be imported easily in any 
// project.
// sass-lint:disable no-duplicate-properties

$fontface-src: '../assets/fonts' !default;

// Regular
@font-face {
    font-family: 'Lato';
    src: 
        url($fontface-src + '/lato/Lato-Regular.svg') 
format('svg'),
        url($fontface-src + '/lato/Lato-Regular.ttf') 
format('truetype'),
        url($fontface-src + '/lato/Lato-Regular.woff') 
format('woff'),
        url($fontface-src + '/lato/Lato-Regular.eot'),
        url($fontface-src + '/lato/Lato-Regular.eot?#iefix') 
format('embedded-opentype');
    font-weight: normal;
    font-weight: 400;
    font-style: normal;
}

// Light
@font-face {
    font-family: 'Lato';
    src:
        url($fontface-src + '/lato/Lato-Light.svg') format('svg'),
        url($fontface-src + '/lato/Lato-Light.ttf') 
format('truetype'),
        url($fontface-src + '/lato/Lato-Light.woff') 
format('woff'),
        url($fontface-src + '/lato/Lato-Light.eot'),
        url($fontface-src + '/lato/Lato-Light.eot?#iefix') 
format('embedded-opentype');
    font-weight: normal;
    font-weight: 300;
    font-style: normal;
}

can you send an example? – RacoonOnMoon Apr 24 '17 at 10:09 — RacoonOnMoon, Apr 24 '17 at 10:09

score 0 · Answer 1 · edited May 23 '17 at 11:54

I am pretty sure that it has to do with the order of the different font files. A browser picks the first file format it supports and SVG is pretty old school so you may end up with this strange behavior.

Check this answer: What's the correct order to load fonts in?

Paul Irish suggests that the 'bullet proof' way to load fonts is to render EOT first, followed by WOFF, TTF, and lastly SVG.

Google Fonts (Lato) not rendering on Google Chrome

1 Answers1