Font rendering in Chrome (woff2) - after load font family doesn't want to change

LJ Wadowski picture LJ Wadowski · Mar 6, 2015 · Viewed 8.2k times · Source

To prevent font rendering lags related to font loading time I wrote some simple script which load CSS containing @font-face and custom fonts with some delay. Thanks to that solution, by default system fonts are used (no lag) and later they are overwrite by new CSS with new fonts. However, solution works everywhere except Chrome. In chrome network tab I can see that fonts were loaded but somehow they were not re-rendered.

Network Tab

How it looks in IE, and Firefox (desired fonts):

Header Firefox and IE

And Chrome (system fonts):

enter image description here

HTML:

 <link data-href="/assets/v2/default/css/font-loader.css" rel="stylesheet" type="text/css" data-mobile="true"/>

Default CSS:

body{
    font-family: sans-serif;    
}
.price{    
    text-align: right;
    font-size: 22px;    
    font-family: sans-serif;
    letter-spacing: 0.01em;
 }

Loaded CSS:

@font-face {
    font-family: 'PT Sans';
    font-style: normal;
    font-weight: 400;
    src: local('PT Sans'),
         local('PTSans-Regular'),      
         url('https://fonts.gstatic.com/s/ptsans/v8/JX7MlXqjSJNjQvI4heMMGvY6323mHUZFJMgTvxaG2iE.woff2') format('woff2'),
         url('http://fonts.gstatic.com/s/ptsans/v8/LKf8nhXsWg5ybwEGXk8UBQ.woff') format('woff'),
         url('../fonts/PT_Sans-Regular.woff2') format('woff2'),  
         url('../fonts/PT_Sans-Regular.woff') format('woff'),  
         url('../fonts/PT_Sans-Web-Regular.ttf') format('truetype');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
}
@font-face {
    font-family: 'PT Sans Narrow';
    font-style: normal;
    font-weight: 400;
    src: local('PT Sans Narrow'),
         local('PTSans-Narrow'),      
         url('https://fonts.gstatic.com/s/ptsansnarrow/v7/UyYrYy3ltEffJV9QueSi4SppsHecKHw584ktcwPXSnc.woff2') format('woff2'),
         url('https://fonts.gstatic.com/s/ptsansnarrow/v7/UyYrYy3ltEffJV9QueSi4RdbPw3QSf9R-kE0EsQUn2A.woff') format('woff'),
         url('../fonts/PT_Sans-Narrow-Web-Regular.woff2') format('woff2'),  
         url('../fonts/PT_Sans-Narrow-Web-Regular.woff') format('woff'),  
         url('../fonts/PT_Sans-Narrow-Web-Regular.ttf') format('truetype');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
}
body{
    font-family: 'PT Sans', sans-serif;
}
.price{
    font-weight: normal;    
    font-family: 'PT Sans Narrow', sans-serif;
    letter-spacing: normal;
    font-size: 30px;
}

JS:

(function (document) {
    var loadScripts = function () {
        var uaString = navigator.userAgent,
                isMobile = function () {
                    return uaString.indexOf('android') > -1 || uaString.indexOf('Android') > -1 || uaString.indexOf('Mobile') > -1 || uaString.indexOf('mobile') > -1 || uaString.indexOf('iPhone') > -1
                };

        this.styles = document.querySelectorAll('link[data-href]');
        for (var i = 0; i < this.styles.length; i++) {            
            if (this.styles[i].getAttribute('data-mobile') === 'false' && isMobile()) {
                return;
            }            
            this.styles[i].setAttribute('href', this.styles[i].getAttribute('data-href'));
        }

    };
    if (document.addEventListener) {
        document.addEventListener('DOMContentLoaded', loadScripts);
    } else {
        document.attachEvent('onreadystatechange', function (e) {
            if (document.readyState === "complete") {
                loadScripts();
            }
        });
    }
}(document));

Answer

irori picture irori · Mar 20, 2015

The woff2 file you specified does not have latin characters. You must have copied the URL of the "cyrillic-ext" subset of the font.

You should use the 'latin' subset. Change the url of woff2 to this:

url('https://fonts.gstatic.com/s/ptsansnarrow/v7/UyYrYy3ltEffJV9QueSi4UU-p1xzoRgkupcXIqgYFBc.woff2') format('woff2'),