Geekly Articles each Day
⬆️ ⬇️

Web Font Performance





The use of web fonts is becoming increasingly popular: according to HTTP Archive , over the past year the number of sites using additional fonts has doubled - from 6 to 12%.



The weak point of web fonts is performance, but the situation is gradually changing for the better: more advanced compression methods appear, browser support improves, unicode, separate font sets, etc.

')

Optimization



At first glance, using web fonts is very simple - just download the necessary set and connect it to the page. But in fact, everything is a little more complicated. There are four different formats:







But none of them provides cross-browser compatibility (you can check support on caniuse.com: woff , ttf , eot , svg ), therefore it is advisable to use several formats at the same time. And here we are faced with a performance problem: the font file itself is quite massive, for example, the Arial font, which supports all languages, weighs 22 megabytes! Of course, on ordinary pages, it makes no sense to connect all the characters of the set at once, so you need a tool that allows you to use only part of the font (for example, only Cyrillic).



For example, the Open Sans font is one of the most popular Google Web Fonts, including all languages, weighs 217 kilobytes, but the size can be reduced by using only one set - latin. then the size will be reduced to 36 kilobytes:







Here's how to connect only part of the font (latin): 



<link href="http://fonts.googleapis.com/css?family=Open+Sans&subset=latin" rel="stylesheet" />




File size can be reduced by removing additional Font-hinting metadata for browsers where this technology is not supported. Font-hinting is part of the font rasterization process, used to improve the appearance of text on a page.



Improved compression algorithms can reduce the file size by 15%, and the expected WOFF 2.0 format in the near future allows compressing 30% better.



To connect only part of the characters ("H", "e", "l" and "o") you can use the following code: 



 <link href="http://fonts.googleapis.com/css?family=Inconsolata&text=Hello" rel="stylesheet" />




Using



All fonts from Google Web Fonts are open , which allows cross-site caching to be successfully used. For example, the above-mentioned Open Sans is used on more than a million sites, which means that to increase productivity, you can cache the font in the user's browser when visiting previous sites with this font.



Here's how it works:







The CSS styles used in the Google Web Fonts service are dynamic: they automatically determine the appropriate format for a particular user and his browser. CSS styles are cached for 24 hours. Inside the style is a link to the font file itself. The font cache itself is stored for a year! Given the popularity of web fonts, it is obvious that the cache already has a copy of the same Open Sans.



There is also a useful tool - Javascript Font Loader from Google, which allows you to display the process of downloading web fonts. It is quite simple to use: 



 h1 { visibility: hidden; } .wf-active h1 { visibility: visible; }




And javasript handles actions: 



 WebFontConfig = { google: { families: [ 'Tangerine', 'Cantarell' ] // Google example }, typekit: { id: 'myKitId' // Typekit example }, loading: function() { // JavaScript to execute when fonts start loading }, active: function() { // JavaScript to execute when fonts become active }, inactive: function() { // JavaScript to execute when fonts become inactive (time out) } };




Loader documentation



In conclusion, a small summary table of the download speed of the same font (Open Sans) when using different services and browsers (numbers in ms):







Conclusion



Already today, you can be confident in the benefits of using web fonts, but it is obvious that their popularity will only increase, the size will decrease, and browsers will be better supported.



Used materials:

Source: https://habr.com/ru/post/159907/

More articles:



All Articles