Another way to eliminate VOSH

Task

VOSH - 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 plug-in font has not yet downloaded , and the styled text is displayed in the following font from the value of the font-family property of this element. Such a switch of fonts can also affect the size of the 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 common points, there are features. For example, in Firefox, the text that will need to be rendered with a non-standard font is not displayed for 3 seconds , there is a similar delay in Chrome. If the font has time to download during this time, the text will be displayed immediately the right font.

On this subject there was such an article . In it, the consequences of VOSH were recommended to be leveled by a competent font game. Unfortunately, sometimes fonts that are too different in characteristics from standard ones are connected.

Decision

To eliminate the VOSH, I decided to specify the font in the main style file using data:uri so that 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. You can find out the width of support for plug-in formats here .

The fonts in eot are the lightest, but only IE is supported.
Fonts in ttf and svg are heavy, sometimes - of course, it depends on the font - occupying twice the space than eot and woff . In my situation, I chose woff , this format is supported by most browsers of our visitors.
There are also browsers that woff do not understand, so the alternatives for them are indicated.

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

Also, it is believed that under Win in Chrome svg fonts look better than others , but it seems to me that this is a matter of taste. The font in this format is compressed better than others with gzip , but is not supported by Firefox and IE.

Thus, you can load fonts using the following code:

 <!--    --> <!--[if lte IE 8]> <link rel="stylesheet" href="fonts_ie.css" media="all"> <![endif]--> <!--[if gt IE 8]><!--> <link rel="stylesheet" href="fonts.css" media="all"> <!--<![endif]--> <link rel="stylesheet" href="main.css" media="all"> 

 /* 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 non- woff fonts, systematically losing users browsers, the most common of which at the moment is IE8.

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

Special features

It should be realized that when using such a technique, there remain browsers that do not understand the fonts in woff , but who will have to download them. Here the number of visitors with such browsers and the productivity of their visits already plays a role. In my situation it turned out that it is better to eliminate the VOSH.

The font will still be downloaded , even if installed locally . This is done to prevent conflicts between patterns; will be downloaded is what you need.
The page will not be drawn until the font style file is downloaded.

Also note that the method is not suitable for fonts with a license that does not allow downloading them using data:uri .

And, of course, a guaranteed solution to all problems with loadable fonts is to refuse to use them. Seriously, sometimes they come to nothing.

Additional Information

A great starting point for exploring the topic of plug-in fonts.
If you need to connect the font as usual . Here is a comment that I noticed after applying this method.

A little about the features of the connection .