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

问题

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.

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

And Chrome (system fonts):

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));

回答1:

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'),

回答2:

The issue only occur with WOFF2 font, when I changed code to:

@font-face {
    font-family: 'PT Sans Narrow';
    font-style: normal;
    font-weight: 400;
    src: local('PT Sans Narrow'),
         local('PTSans-Narrow'),               
         /*Remove woff2 from here and load woff instead*/
         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');
}

It works fine.

来源：https://stackoverflow.com/questions/28897237/font-rendering-in-chrome-woff2-after-load-font-family-doesnt-want-to-change