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).

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.

Sure, but this keeps the documents separate or even on a different server, like FontAwesome or Google.

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).

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