I use Angular2 and webpack. Styles are connected to components, encapsulation is not used.

There is a problem with custom fonts. Some components define their sizes, but due to asynchronous font loading, it turns out that they measure sizes with standard fonts instead of custom ones.

How can this be fixed?

As far as I understand, there are no useful events in this regard. I thought about checking the current font with some delay, but I could not find how to determine the current font. getComputedStyle always returns the computed value, regardless of whether the font is loaded.

Perhaps there is some solution specific to a webpack or angular?

 ~function () { var link = document.createElement('link'); link.rel = 'stylesheet'; link.href = 'https://fonts.googleapis.com/css?family=Shrikhand&_='+Date.now(); document.head.appendChild(link); var dest = document.getElementById('dest'); console.log(getComputedStyle(dest).fontFamily); var width = getComputedStyle(dest).width; dest.style.width = width; }(); 
 body { font-family: 'Shrikhand', cursive; } p { outline: 1px dotted red; float: left; clear: left; white-space: nowrap; } 
 <p style="font-family: initial;">Need to handle font loading</p> <p id="dest">Need to handle font loading</p> <p>Need to handle font loading</p>

PS: This question is in English.

  • link.onload = function () {alert ('loaded');}; ? - Vorobyov Alexander
  • @VorobyovAleksandr, well, the webpack is the same .. I do not control when he does what, and he inserts the contents of the styles with the style tag with the styles inside ... - Qwertiy ♦

0