How to use custom fonts on the web and not go crazy

Has it happened that you see pictures and design on a web page, but you do not see the text - does it appear a couple (tens) seconds later? This is loaded with custom web fonts. We explain why this happens and how to avoid it.

The classic question on the interview of ops-engineers and programmers: you wrote in the address bar of the browser meduza.io and pressed Enter. What will happen? (The answer is 10 pages )

Ok, we have specified font-family: PFRegal, "Times New Roman" for our text. What will happen?

The browser will see if there is a font-face ad for PFRegal. If it is, the font file will start downloading. What will readers see those seconds (tens of seconds on 3G) while downloading is taking place?

In Safari: your text will take place on the page, but will remain transparent , that is, invisible to the reader. To calculate the occupied space, use the fallback font (standard font, in our case, Times New Roman), more on that below.

Chrome and Firefox have 3 seconds of transparent text , then the system fallback font is used.
')

In IE, the fallback font will immediately appear.

IE is not so bad!

All three approaches comply with the standard : “In case where it is rendered, it’s renowned if it’s not. of text using a fallback font. "

How to deal with transparent text in Safari and Chrome?

There are several ways:

1. Make a separate css-file with inline font, connect it after the html code with text. The HTML document is processed (and displayed on the screen) from the beginning of the file to the end, as it is loaded. This makes it possible to manage fonts even without using JavaScript. It is important to make exactly inline, and not connect an external font file. The method does not work in Desktop Safari and may not work, if there is not enough time between the text rendering request and the css font connection, experiment.
   
   
2. Use javascript hack with invalid media type . This method allows you to immediately show the text in a fallback font, but in our tests the fallback font hangs a little longer than in the first method. This approach has problems in IE and FF, but otherwise it seems the most logical to date.
   
   
3. Use the Font Loading API , this allows you to start a non-blocking font download immediately upon opening the page. This is a new js-API and it is supported only by Chrome and the latest Safari .

All these methods are needed to show the text as soon as it is received by the browser, without delay, using one of the fonts available in the standard OS (fallback font). There is a service for selecting the most similar fallback-font.

Now it blinks when refreshing!

Yes, solving one problem we created another. Now the text blinks when it is refreshed, the font changes in front of the reader. We have to choose - which is more important for us.

We in Medusa are optimizing the main page for people opening it using a bookmark in the browser: the first discovery is slow, the subsequent ones are instantaneous without blinking. Pages of materials are mainly opened from social networks on phones where there is no cache, and we optimize the time the text appears on the screen when it is first loaded.

It is important not to forget some system things:

1. Configure normal server-side caching (cache headers).
   
   
2. Enable gzip-compression on the server, it saves a lot of mobile traffic, and the readers processors are already powerful enough to overlook the decoding overhead.

How to check that everything is working fine? I have too fast internet

1. Use the built-in Google Chrome.
   
   
   Ability to emulate bad internet. Good 3G - our choice for debugging Medusa
   
   
   Reset the cache by the right mouse button (works only if the Developer Tools are open)
   
   As well as superknowledge how to block downloading a specific address or even an address mask in Chrome: enable Developer Tools Experiments in chrome: // flags → Open Chrome Developer Tools → Settings (hidden in three points in the upper right corner) → Experiments → Press Shift 6 times → Check Request blocking .
   
   
   Now you can do it like this
   
   
2. To debug in Desktop Safari, you need to install Network Link Conditioner (Apple Developer Account is required for download). To debug iOS Safari and iOS Webview, use Network Link Conditioner in the settings of your device ( Settings → Developer → Network Link Conditioner ). Keep in mind that the speed limit settings will apply to the entire system, not just Safari.

How about a new standard?

You're welcome. Here is the font-display property available in Chrome Canary. It solves all the problems listed in the article. Another 2-3 years and you can breathe easy.

I am a perfectionist, is there anything else to improve?

Of course! Squeeze the font file, customizing it for yourself. Cut out glyphs that you do not use in texts (Regal has over 800 by default). Disable extra Open Type Features . For all this you need special software [1] , [2] or [3] and an understanding of how the fonts are arranged.

Conclusion?

Incorrectly connected custom font worsens page load time, and this leads to the fact that your page is seen by fewer people who do not wait for the download. There is no ideal way to connect custom fonts on the web, but there are quite good hacks from which you need to choose the most suitable for a particular situation.