Is there a way to download a font in HTML5 pages before rendering the page?

While usin开发者_StackOverflow社区g @font-face HTML5/CSS3 loads the page, and you slowly see the fonts appear. Is there no way to load the fonts first?

You might get some luck (especially in the future) with link prefetching:

<link rel="prefetch" href="pathto/font">

(only supported by Firefox, at the moment). If you use this on a page before the page where @font-face is used, the font file can be in the cache before it is actually used.

There is now a draft for preload which is going to be released with Chrome 50.

With this feature we should be able to do this in the head element and probably flush it before the rest of the html is rendered and sent to the browser

<link rel=preload as=font href=...>