How to speed up loading of fonts?

Question

Is there a way to make the fonts on a site load more quickly?

When I clear my browsing data and load the site, the handwriting font at the top of the site loads quickly, as does the menu tabs font (neither of which are standard fonts); but the font that the body copy is in takes a few seconds to load. For those few seconds, the body text displays in a different font.

The fonts taking time to load are Arno Pro and Arno Pro Italic.

A guy added those fonts recently. He wrote additional/new CSS styles in the styles.css file and he says he doesn’t know of a way to speed up their loading, as the browser needs to download the fonts.

But other sites that use non standard fonts load more quickly.

Answer 1

Increasing font speed by using a CDN

Ideally you should be using custom fonts on a content delivery system, since Arno Pro is a commercial font by Adobe you should look into using there Typekit service which is great for serving fast as quickly as possible and taking away resources on your own network.

Choosing the right font for your website

When choosing a font for your website you should factor in the size of the font library as fonts can vary in size from one font to another, especially if your serving these fonts locally.

Caching your fonts

You should ensure that your website is caching the fonts meaning that people who have visited your site once before do not need to download the font again until the expire of the cache has been exceed. There are various threads on setting up expires using various ways all over Pro Webmasters that you can explore (This can be done both on the remote web server or CDN, Adobe and Google fonts stored on their services do this already).

Your host may be slower than you think

Slow web hosting can be more noticeable when server-side requests are increased, since technically you are using 2 fonts that is 2 additional requests and the time they take to responded to the request and complete the fetch.

Testing your website

Your first step should be testing your website and working out whats going on and how much slower the site has become with the font, not doing these tests is considered a bad practice because it could be a combination of problems.

I recommend: http://www.webpagetest.org/

Ensure that you test from different locations with 9 repeat tests, this can be done by clicking the following: click advance settings > test settings change Number of Tests to Run from 1 to 9 additionally ensure that you are using Connection FIOS 20/5Mbps as attempting to emulate actual viewing time is unreliable since broadband speeds vary and so do browsers. Setting different browsers and different speeds is good only for weird fault finding that is only affecting users with a certain speed and download rate.

Answer 2

There is no way to preload font file effectively, cause browser always waits for appropriate dom element before loading fonts mentioned in css, so you can do only:

1. Use js to make img.src-like preload. It's better to use some library, e.g. Web Font Loader

what I use:

2. Similar font from popular cdn, e.g. Google Fonts. In your case Crimson Text is the closest.

3. If substitution is not possible, try to minify font file excluding unnecessary and rare chars like † or ♣ and letters from other alphabets: Þ (Icelandic), ξ (Greek) if you don't need them. I use Font Forge to manually delete them.