Google WebFonts and FontFaceObserver. Use third-party fonts on your website

WebFonts. Story

WebFonts is a technology for using third-party fonts on your web page. One example:



If we start from the beginning, the font tag was introduced in 1995, and already in 1996, the program definition was written in CSS. Starting with CSS 2.0, font loading and synthesis was introduced in browsers, but nonetheless still popular, and now old and irrelevant IE had no support for font loading, which prevented the rapid development of font use on its website.
')
In the modern Internet, web fonts are a long-established thing. On different sites, we can use all sorts of fonts, which, in turn, are not included in the delivery of one or another operating system, but there is an undesirable side effect, which we will talk about today.

File formats

To connect the fonts, software insertion into CSS is used, the so-called @-rule. So, in the simplest form, @ font-face is such a declaration. It looks like this:

/*   */ @font-face { font-family: ' '; src: url('//'); } /*   */ p { font-family: ' ', Arial; } 

TTF or OTF - familiar to us font file, but loaded from the server while viewing the site;

WOFF is an unprotected archive of OTF or TTF source code, perhaps the most important format supported by most popular browsers, and files in WOFF are usually 2–2.5 times lighter than the original ones;

EOT - the TTT OpenType-implemented archive with protection mechanisms is needed to support older Internet Explorer browsers (since IE8, besides TrueType curves, PostScript is also supported);

SVG - to support the Safari browser.

Fonts prepared for the introduction (@ font-face) on the site today should be in several formats at once. You understand that there are some discrepancies, just as there is more than one type of operating system. There are a lot of font formats, but a specific one will work only in a specific browser. As for these very formats, which is why so many of them need to be specified when connecting, they are needed for cross-browser support of the site.

 @font-face { font-family: '__'; src: url('__.eot'); src: url('__.eot?#iefix') format('embedded-opentype'), url('__.woff') format('woff'), url('__.ttf') format('truetype'), url('__.svg#DSNoteRegular') format('svg'); font-weight: normal; font-style: normal; } 

If you want to use encrypted code instead of a file, in this case base64 comes to our rescue, which works on the same principle with images, but is not processed for old IE.

 @font-face { font-family: '__'; src: url('__.eot'); } @font-face { font-family: '__'; src: url(data:font/woff;charset=utf-8;base64,) format('woff'), url(data:font/truetype;charset=utf-8;base64,) format('truetype'), url('__.svg#__') format('svg'); font-weight: normal; font-style: normal; } 

Embedded OpenType?

As you can see, the plug-in fonts for IE have a line with this parameter:

 src: url('__.eot?#iefix') format('embedded-opentype') 

In the classic version, we had to specify with you exactly like this:

 src: url('__.eot') format('embedded-opentype') 

But when adding the character "?" after the font format, we force the browser not to read the following statement - format ('embedded-opentype'). Internet Explorer supports embedding fonts through the so-called proprietary Embedded OpenType standard, starting with version IE 4.0. It uses a digital rights management method to prevent copying fonts that are licensed.

What if the font is not supported in the browser?

Long ago, workarounds, so-called "crutches" for displaying a particular font, were invented. There are cases when the font was designed only in SVG format, or only in TTF format.

1. In ancient times, the developers connected the image, which in turn was the text typed in the visual editor. However, now it is considered a bad form, because the support is quite difficult (you need to open the editor again to change the text of the picture), respectively, the user can not copy the text from the image.

2. Also common was the use of flash-solutions.

3. Another solution is to use Javascript to replace text with VML (for Internet Explorer) or SVG (for all other browsers).

What other problems may arise?

The browser will try to synchronize the loading of the font, it will try to hide the text, that is, make it invisible until the font has been loaded. This effect is called FOIT, the “white flash” effect.

One of the web developers Bram Stein published an article about how he corrected the situation by writing his own implementation of the polyfile. Below is an example of a similar problem and its solutions.

Flash effect

The effect of FOIT in browsers such as Safari, Chrome, Opera, Firefox tends to hide the text for a maximum of 30 seconds before refusing to get the font, after which the default font is set.

An example of how the font is loaded:



And yet, 2.7 seconds is a long time!

What can be done?

Initially, the approach was to include the conversion of font files to URIs so that those fonts could be included directly in the font family definitions in the CSS file. By loading this CSS file in an asynchronous way, you can ensure that the browser immediately renders the text in the page using custom fonts, and the new fonts are applied as soon as the CSS is loaded.

However, in any experiment there is a side effect.

Initially, Bram Stein used a custom font, but after its font was loaded, a “flicker” occurred, in the example at 0.7 second:



In short, flickering occurs when the browser tries to display the font from the font-family and apply it in html. The font defined in the @ font-face declaration that was not yet loaded.

Bram Stein showed how to connect fonts correctly, he developed a script, an alternative from google for asynchronous loading of fonts, this is a script - FontFaceObserver.

We try

Analysis

Standard connection from Google

Honestly speaking, using more than one font on the site can specifically slow down the loading speed of the site page, thereby increasing the overall load time. The Google Fonts API allows you to quickly add a font to a site using a font generator, thereby quickly designing your site. However, remember the effect of FOIT. Total download time is 322 ms.



Google Web Font Loader

Web Font Loader is a JavaScript library for advanced work with the API, a library that gives us more control over font loading than the standard Google Fonts API. The script allows us to use multiple fonts, loading them sequentially or asynchronously. Unlike the standard connection, text with standard fonts is shown on weak connections until the font is loaded.
Total load time: 1132 ms



FontFaceObserver

FontFaceObserver is a JavaScript library (5kb), the so-called subloader compatible with any web font service. The script allows you to notify us about whether the font is loaded or not, allows you to track the event after loading and before loading the font. Total load time: 159 ms



Script usage:
[ Documentation (eng) ]

 <style> @import url(http://fonts.googleapis.com/css?family=_&subset=cyrillic,latin); /*   ,         */ body {font-family: sans-serif;} /*   */ .fontOneLoad body { font-family: '_', cursive; } </style> <script src='js/fontfaceobserver.js'></script> <script> //  var fontOneLoad = new FontFaceObserver('_', {}); fontOneLoad .check() .then(function () { // ,    //    html document.documentElement.className += " fontOneLoad"; }); </script>