Why do fonts need to be optimized?
A font file can contain more than a thousand characters. In addition to numbers and punctuation marks, it can contain letters for 10-15 languages. But 1-2 languages and 150-180 characters are enough to display the page.
Therefore, it is necessary to optimize font files so that they contain only what is actually used on the site.
How much does it speed up the site?
You will win up to 0.4 seconds. Considering that good pages should load faster than 2 seconds, this is 20%. Such acceleration can increase the conversion rate for mobile visitors by several percent. It’s just a gift, considering that all the work will take no more than a couple of hours.
An example of optimizing popular fonts. The Russian alphabet (not extended), regular style, downloaded from fonts.google.com a file in ttf format, a woff2 file from a CSS CDN service file of the form 4iCs6KVjbNBYlgoKcg72j00.woff2 and optimized in the [Font Optimization] service (/tools/web-font-optimizer “Service for font optimization”) woff2:
| google’s original ttf | Syrillic woff2 google | Our woff2 file | |
|---|---|---|---|
| Roboto-Regular | 164.32 KB | 9.89 | 5.80 |
| OpenSans-Regular | 127.77 KB | 10.86 | 6.60 |
| Ubuntu-Regular | 292.66 KB | 20.37 | 6.59 |
The use of the google fonts CDN service is compared with files optimized in the service on a regular page with Russian and English text. The Woff2 format.
| File size | Number of files | |
|---|---|---|
| CDN service | CSS file 1.29 KB Roboto cyrillic regular 9.89 KB Roboto latin regular 18.10 KB Total 29.28 KB |
2 fonts + 1 CSS = 3 files |
| Font Optimization service | Combined Cyrillic and Latin file together 7.15 KB | 1 font |
Which browsers are supported?
All font files are generated in 3 formats: woff2, woff, truetype. This provides support in the following browsers: IE 9+, Edge 1+, Chrome 3.5+, Safari 3.1+, Firefox 3.5+, Opera 10.1+, Android 2.2+, Safari for iOS 4.2+. This is 98.39% of all Internet users according to the website caniuse. Or all users whose browser was released after 2010.
How to use optimized files?
Upload them to your server. Then replace the current CSS code of the font connection with the provided one. Make sure that the paths to the font files are correct. Then replace the font name in the “font-family” attribute with a new value in all your CSS files. If you have any difficulties, then contact the programmer.
Checking font settings
You can check the setting in our tool Checking the page.