32692

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

Question:

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.

<img alt="Network Tab" class="b-lazy" data-src="https://i.stack.imgur.com/f0M6k.png" data-original="https://i.stack.imgur.com/f0M6k.png" src="https://etrip.eimg.top/images/2019/05/07/timg.gif" />

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

<img alt="Header Firefox and IE" class="b-lazy" data-src="https://i.stack.imgur.com/7JS6D.png" data-original="https://i.stack.imgur.com/7JS6D.png" src="https://etrip.eimg.top/images/2019/05/07/timg.gif" />

And Chrome (system fonts):

<img alt="enter image description here" class="b-lazy" data-src="https://i.stack.imgur.com/tDVUP.png" data-original="https://i.stack.imgur.com/tDVUP.png" src="https://etrip.eimg.top/images/2019/05/07/timg.gif" />

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

Answer1:

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

Answer2:

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.

Recommend

  • jQuery colorbox onclose update parent
  • how to center anchor tag horizontally css
  • Javascript Tooltip not showing up in box as defined by style
  • D3 dynamic network slow when adding nodes realtime
  • what can i do if for loop repeat single row from mysql database?
  • CSS Local Font not showing up
  • Toggle visibility of text box based on status of check box -jQuery
  • Extract text from “” HTML tag
  • How do one only submit click event (div), when using jquery live function?
  • Docker container for google cloudML on compute engine - authenticating for mounting bucket
  • TCPDF's getNumLines() is sometimes wrong
  • Play Framework nested form errors missing
  • Why are views not counted if you embed a youtube iframe dynamically using jquery?
  • Jquery Show & ScrollTop (or ScrollTo)
  • How to use arithmetic operators with SAS macro variables [duplicate]
  • Show records ordered with maximum price first in PHP & MySQL
  • Netlink sockets and libnl - nl_recvmsgs_default returning -16 (EBUSY)
  • How to add regEx in angular filter
  • IOS > Open URL in Safari with POST
  • Find JSON nested nodes using multiple string values
  • Outlines on links in IE9 remains when focus is changed
  • Hector: how to query parts of a Composite Type
  • How To Customize ASP.NET Chart Databound To SqlDataSource
  • converting text file into xml using php?
  • Adjust width of select element according to selected option's width
  • Alternative To body {overflow:scroll;} That Will Prevent Page Jostling/Wriggling?
  • Custom validator control occupying space even though display set to dynamic
  • Play WS (2.2.1): post/put large request
  • Jquery UI tool tip close icon
  • Change multiple background-images with jQuery
  • Android screen density dpi vs ppi
  • Why HTML5 Canvas with a larger size stretch a drawn line?
  • Spray.io: When (not) to use non-blocking route handling?
  • Why doesn't :active or :focus work on text links in webkit? (safari & chrome)
  • DirectX11 ClearRenderTargetViewback with transparent buffer?
  • Modifying destination and filename of gulp-svg-sprite
  • Change an a tag attribute in JavaScript based on screen width
  • Warning: Can't call setState (or forceUpdate) on an unmounted component
  • GridView Sorting works once only
  • How to Embed XSL into XML