Font-face flickering when new css files are dynamically loaded?

Not sure if it would fix your issue but you could use css to set the visibility of the elements to hidden until the font is loaded. Google's API provides wf-loading and wf-active classes which are added to the body to address this issue.

Not sure if it would fix your issue but you could use css to set the visibility of the elements to hidden until the font is loaded. Google's API provides wf-loading and wf-active classes which are added to the body to address this issue. I always set up a separate stylesheet just for the @font-face rule, and within that put in the following rules, where replace is the class of the element that's being replaced, for you that would just be the p tag.. Wf-loading .

Replace { visibility: hidden;} Yours would be . Wf-loading p { visibility: hidden;} Then as soon as the webfont is loaded, JS puts the wf-active class on the body, and your text shows up. Let me know how that goes and if you have any issues then just drop me a line.It might also be worth doing some searching for "flash of unstyled content" or "flash of unstyled text" as this is a well known and well documented bug.

Thanks, but the problem we're having is initially the fonts are loaded and displayed properly without too much of a FOUC. After the fonts are initialized the rest of the 'social' js is being loaded (async), these come with their own css. Once that css gets loaded, the webfonts get rendered, which results in a couple of flickers at the rate of one per css file.

We have been thinking about loading that social js blocking upfront, but that will halt the rendering of the DOM for far too long. So the real question: how can we avoid re-rendering of the font when new css gets loaded. – Kasper Dec 16 at 9:56 May be this is easier to reduce the flickering by reduce the number of CSS file?

– vincicat Dec 17 at 10:56 We're using just one CSS file, but the third party javascripts load in their own css-es as well, which causes the flickering. – Kasper Dec 19 at 13:08.

This is currently an inherent issue with browsers and the @font-face property. The blink occurs when the font is loaded and the page updates to reflect the font. If you wish to remove the "blink" entirely, the only sure fire way is to include the font as a data URI in the style sheet.

Of course, using the standard "safe" fonts will also remove the blink. Data URIs allow you to actually embed the code for the font in the stylesheet so there's no blink when the page refreshes to show the desired font. Using data URIs, will obviously increase the file size (kb) of any style sheet.An online converter to get base64 code can be found here Usage for @font-face would be like so..... @font-face { font-family: "My Font"; src: url("data:font/opentype;base64, the base64 code here "); }.

I can suggest a simple and dirty trick I have used myself to solve issues like this. If you implement this, from the user's side the effect will be that the entire page will load at once (with the correct Web Fonts), but after a delay. Once loaded, nothing will flicker or change.

Wrap your entire page contents in a div and set its visibility to hidden. Then use js to turn on the visibility once the whole page (stylesheets and all) is loaded. Here's the code: ...your entire page contents... The onload ensures that the visibility is switched on only after the entire body has loaded.

Although I haven't used Web Fonts, I use this trick to fade in the entire contents of this website with no changing or updating afterwards. But yes, there will be a delay before the entire page comes into view. EDIT: I added Google Web Fonts to the site I linked.

Still works fine. No font-face flickering.

Ah yes that would work and hopefully it will help a bunch of people with the same problem ending up here. For my case that won't really work though since this would leave me with a blank page for too long, my load sequence is like following to limit the loadtime. Load webfonts -> Init site since dom and fonts are ready -> Load third party scripts Eg.

Twitter Search widget (since it is super slow) and this is where I get the flickering. Any other way would leave the user with a blank page for 1-2 secs wich is a bit too much. But still, thanks!

– user192965 Nov 24 at 15:49.

Then only set the src to the iframe once the document is fully loaded, so it doesn't hold anything up. In html: In script: $(document). Ready(function() { $('#socialMedia').

Src = "mysite.com/mysocialmediastrip.html"; }); Where mysocialmediastrip. Html contains all the social media buttons. Setting the src will cause that iframe to reload and pull in that content, but IIRC, the rest of the page will be left alone -- all of the button rendering will have been done in mysocialmediastrip.

Html, not in your main page.

I cant really gove you an answer,but what I can give you is a way to a solution, that is you have to find the anglde that you relate to or peaks your interest. A good paper is one that people get drawn into because it reaches them ln some way.As for me WW11 to me, I think of the holocaust and the effect it had on the survivors, their families and those who stood by and did nothing until it was too late.