The clients of our service noticed a bug in which not a single font is displayed on the site. The font is loaded from our server (formats woff, ttf, eot, svg), font Lato Sans. In the styles themselves it is indicated that in case of inaccessibility of the font, it is necessary to use Arial, or any other system font without sans serif. Also in the styles indicated font smoothing, here is an excerpt from the code:

font-family: "Lato Sans", "PT Sans", "Arial", sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-smooth: always; text-rendering: geometricPrecision;

Example of loading one of the font type:

 @font-face { font-family: 'Lato Sans'; src: url('/Content/webfonts/LatoSans/lato-regular.eot'); src: url('/Content/webfonts/LatoSans/lato-regular.eot?#iefix') format('embedded-opentype'), url('/Content/webfonts/LatoSans/lato-regular.woff') format('woff'), url('/Content/webfonts/LatoSans/lato-regular.ttf') format('truetype'); font-weight: normal; font-style: normal; }

Description of the problem: The client visits the site (Google Chrome 58, Windows), but does not see any text. That is, the entire graphics has been rendered, but the font is not. And the text is also not shown in the system font. And after changing the browser size, the font seems to be loading, and everything is displayed. The problem so far has been noticed in only one browser, in the others based on WebKit / Blink is also possible.

An example of what this looks like for a customer.

I managed to repeat it myself only once, after reloading the page everything was already fine, respectively, I could not catch and fix the bug. What could be the problem, and how to solve it?

I applied several solutions that I did, but did not help - it was to load the font after loading the main page, via JavaScript, on the onLoad event. And make an animation in 1ms after the page loads, so that the browser would re-render the font (below is an example of the last fix).

 body { -webkit-animation-delay: 0.1s; -webkit-animation-name: fontfix; -webkit-animation-duration: 0.1s; -webkit-animation-iteration-count: 1; -webkit-animation-timing-function: linear; } @-webkit-keyframes fontfix { from { opacity: 1; } to { opacity: 1; } }

    1 answer 1

    I noticed a feature behind chrome, that if a browser reapplies to a certain font, then something like that got out on Angulare 4 too. I inadvertently forced the font connection file into several components, as a result of which the angular re-applied to the server for that font. As a result, after re-loading (and this was actually code 302) the font seemed to be displayed in white. If you click on the color checkbox in the debugger, it will appear. To follow this is quite simple. Watch in the console in the network tab

    • Checked, the font is connected only once for each type, everywhere there is 200 code. - Alex Elmenov