Preload Hints for Web Fonts
bramstein.com
Preload Hints for Web Fonts
1–10 of 10 posts
Re: Preload Hints for Web Fonts
#2Since no browsers support these preload hints, does anyone know of any good hacks to force browsers to preload fonts earlier than usual?
Re: Preload Hints for Web Fonts
#3Is this something you could configure server-side using SPDY? Start pushing font info when the page starts loading?
Re: Preload Hints for Web Fonts
#4Since no browsers support these preload hints, does anyone know of any good hacks to force browsers to preload fonts earlier than usual?
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...
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/) will let you do this in a much nicer way and it already has pretty decent browser support (Chrome, Opera and Firefox beta).
Re: Preload Hints for Web Fonts
#5Is this something you could configure server-side using SPDY? Start pushing font info when the page starts loading?
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.
Re: Preload Hints for Web Fonts
#6Can't you preload fonts by base64 encoding them and embedding them in CSS?
Ref: http://sosweetcreative.com/2613/font-face-and-base64-data-ur...
Re: Preload Hints for Web Fonts
#7Can't you preload fonts by base64 encoding them and embedding them in CSS? Ref: http://sosweetcreative.com/2613/font-face-and-base64-data-ur...
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).
Re: Preload Hints for Web Fonts
#8Can't you preload fonts by base64 encoding them and embedding them in CSS? Ref: http://sosweetcreative.com/2613/font-face-and-base64-data-ur...
This.
Though, depending on the font (and how many), its glyphs, etc. you can get pretty bloated CSS files so while you do load the fonts earlier, you could be waiting just as long in the end.
I sometimes put them on a CDN to help alleviate some of the potential delay to download and/or render.
Re: Preload Hints for Web Fonts
#9Can't you preload fonts by base64 encoding them and embedding them in CSS? Ref: http://sosweetcreative.com/2613/font-face-and-base64-data-ur...
Sure, but this keeps the documents separate or even on a different server, like FontAwesome or Google.
Re: Preload Hints for Web Fonts
#10Can't you preload fonts by base64 encoding them and embedding them in CSS? Ref: http://sosweetcreative.com/2613/font-face-and-base64-data-ur...
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).
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.