How to prevent flickering with duplicate webfont definition?

Question

Suppose I have a webfont defined in some @font-face CSS rule. At runtime I want to add more CSS via JS. I'm not talking about the FOUT at load time.

It just so happens that my framework occasionally adds the very same @font-face rule again. Turns out this makes Firefox and Chrome try to re-download (or load the disk-cached) font file, and this causes flickering.

Demo: http://jsfiddle.net/Hg9Pc/ _{(Firefox; this particular case works fine in Chrome)}

Is there a way to prevent this flickering other than "just don't do it"? Crazy cache headers or something?

Answer 1

I don't think you can prevent the flicker if you in fact invoke another @font-face call. However, it seems like you might be able to do one of the following two things:

1. Have the javascript sift through and delete out that extra definition before loading it into the page (this would admittedly be a rather difficult task I think, but not impossible).

2. If you can, define the original implementation by a different font name. For example, the original font may be defined as My Arial so later when Arial (I know you would not use @font-face for Arial, it is just for an example) loads via the framework (both of which point to the same file for definition), the flicker should not occur because the page is not actually trying to replace the My Arial definition. The problem with this would be if there is ever an instance where you do want it to overwrite, it would not.