CODEWITHSUNDEEP
javascriptcssfirefoxwebfontsfouc
suncat100
suncat100

Reputation: 2194

Firefox reloads webfonts when appending CSS dynamically

I noticed some strange behavior in Firefox, as I was getting a FOUC when appending CSS by javascript. The problem is, Firefox reloads a webfont each time a CSS style is added dynamically with javascript. Although the reloaded file would normally be cached, it still creates a FOUC (flash of unstyled content).

Actually, the issue ONLY occurs when dynamically adding CSS to a document with font-family, or with a @media query. In both these cases, Firefox reloads the web font :(

Codepen demonstration: http://codepen.io/mjau-mjau/pen/XXgZbV?editors=101

As you can see in the image, the webfont is reloaded after applying CSS dynamically: screen

This only happens for Firefox. Anyone know why this is happening, or if there is an official bug tracker on this for Firefox?

Upvotes: 1

Views: 65

Answers (0)

Related Questions