Another way to eliminate lice

Task

LICE - the effect that occurs when styling text with a plug-in font that is not installed on the user's computer. It appears when the connected font has not yet been downloaded , and the stylized text is displayed in the following font from the property value of font-familythis element. Such switching of fonts can also affect the size of an element if they depend on the size of the text in it.
The effect is also known as FOUT - as Paul Irish called it .

With general points, there are also features. For example, in Firefox, the text that will need to be drawn in a non-standard font is not displayed for 3 seconds , in Chrome there is also a similar delay .If the font has time to download during this time, the text will be displayed immediately in the desired font.

There was such an article on this topic . It recommended that the effects of VOSH be leveled by a competent game with fonts. Unfortunately, sometimes fonts that are too different in characteristics from standard ones are connected.

Decision

To eliminate LOSS, I decided to specify the font in the main stylesheet with the help data:urithat the font is displayed immediately, along with the page.

It remains to choose the font format understood by most visitors' browsers and convenient for downloading. The breadth of support for plug-in font formats can be found here .

Fonts are eotthe easiest, but only IE are supported.
Fonts in ttfand svgare heavy, sometimes - of course, it depends on the font - taking up twice as much space as eotand woff. In my situation, I chose woffthis format is supported by most browsers of our visitors.
There are still browsers that woffdo not understand, so alternatives for them are indicated.

IE version 8 and older do not understand the fonts woffthey need eot. At the same time, IE8 does not understand files data:uriheavier than 32KB , and older versions do not perceive any at all, so in a separate style file you can simply specify links to font files for them. To prevent these browsers from loading the unnecessary, the font connection in woffand in other formats is highlighted in a separate stylesheet and separated by a conditional comment.

Also, there is an opinion that under Vin in Chrome, svgfonts look better than others , but, it seems to me, this is a matter of taste. A font in this format is compressed better than others with the help of gzip, but is not supported by Firefox and IE.

Thus, you can load fonts using the following code:

/* fonts_ie.css */
@font-face {
	font-family: 'PT Sans Narrow';
	font-style: italic;
	font-weight: bold;
	src: url('PTS76F_W.eot');
}

/* fonts.css */
@font-face {
	font-family: 'PT Sans Narrow';
	font-style: italic;
	font-weight: bold;
	font-variant: normal;
	src: url('data:application/x-font-woff;base64,d09GRgABAAAA...aCw0AAA==') format('woff'), 
	     url('PTN77F_W.svg#PTSans-NarrowBold') format('svg'),
	     url('PTN77F_W.ttf') format('truetype');
}

/* main.css */
body {
	font-family: 'PT Sans Narrow', 'Arial Narrow', sans-serif;
	font-style: italic;
}

When using this method, VOSH remains only in unsupported wofffonts, systematically losing browsers to users, the most common of which at the moment is IE8.

On this page, the font is connected traditionally.
The font is encoded here.
The effect is more noticeable on a slow connection.

Features

It is worthwhile to realize that when using this technique there are browsers that don’t understand the fonts in woff, but who have to download them. Here the number of visitors with such browsers and the productivity of their visits already play a role. In my situation, it turned out that it is better to eliminate LICE.

The font will still be downloaded , even if installed locally . This is to prevent conflicts between styles; it will download as needed.
The page will not be drawn until the font file with the font is downloaded.

I also note that the method is not suitable for fonts with a license that does not allow them to be downloaded usingdata:uri .

And, of course, the guaranteed solution to all problems with loaded fonts is to refuse to use them. Seriously, sometimes they’re useless.

Additional Information

A great starting point to learn about plugin fonts
if you need to plug in a font as usual . Here is a comment that I noticed after I applied this method.

A little about the features of the connection .