

Preload Hints for Web Fonts - bramstein
http://www.bramstein.com/writing/preload-hints-for-web-fonts.html

======
errantmind
Can't you preload fonts by base64 encoding them and embedding them in CSS?

Ref: [http://sosweetcreative.com/2613/font-face-and-base64-data-
ur...](http://sosweetcreative.com/2613/font-face-and-base64-data-uri)

~~~
bramstein
You can, but then you're limited to a single font format and you would not
gain any benefits from the browsers' ability to download in parallel.

A lot of this will improve when HTTP/2 becomes more common (you can push
resource to the browser and parallel downloads will become more efficient).

~~~
mcgoooo
I use this technique to great effect, and i would recommend this. Woff i very
well supported generally, and then i put a backup to the actual file for the
lagging browsers.

[http://caniuse.com/#search=woff](http://caniuse.com/#search=woff)

------
mef
Since no browsers support these preload hints, does anyone know of any good
hacks to force browsers to preload fonts earlier than usual?

~~~
bramstein
There are several hacks. Almost all of them rely on using JavaScript to make a
XMLHttpRequest to retrieve font data. This will force the browser to load the
fonts earlier by working around the normal @font-face loading mechanism.

Because you already have the font data in JavaScript you can then also store
the fonts in localStorage. This way you can avoid making a request for them on
the next page load.

Smashing Magazine wrote a bit more about this technique:
[http://www.smashingmagazine.com/2014/09/improving-
smashing-m...](http://www.smashingmagazine.com/2014/09/improving-smashing-
magazine-performance-case-study/#webfonts)

I'm generally against this idea because you're basically reimplementing the
browsers' caching mechanism. The CSS Font Loading API
([http://www.w3.org/TR/css-font-loading/](http://www.w3.org/TR/css-font-
loading/)) will let you do this in a much nicer way and it already has pretty
decent browser support (Chrome, Opera and Firefox beta).

------
sp332
Is this something you could configure server-side using SPDY? Start pushing
font info when the page starts loading?

~~~
inglor
Yes, once HTTP/2 kicks in (what most SPDY actually is now, and what it evolved
into) the server can push assets. That makes this feature obsolete.

Source:
[https://http2.github.io/http2-spec/#PushResources](https://http2.github.io/http2-spec/#PushResources)

