Typography is a key feature for any successful web design which helps in readability, branding, and uniqueness. Web Fonts helps web designers to achieve brand-specific looks, consistency & sharp rendering irrespective of device or screen size. But just like other features, this improved user experience comes with a cost of performance if you are not using web-safe fonts. With each use of a web font, it adds an extra resource to be download when they access your website.
Using web fonts on your website doesn’t mean that your pages will be slow. In fact, using the recommended practice of using optimize fonts and proper strategy can improve your website speed. what’s more, improve core web vitals core
How to use web fonts efficiently?
Before I explain how can we use web fonts efficiently in our design let me explain the 2 types of web fonts available which are
- web safe fonts : – these fonts come pre-installed in OS system whether it’s windows, Linux, or IOS like Times New Roman, Arial, and Courier.
- web fonts:- these fonts are specially design and tuned for web use. they are linked and used after CSS @font-face declaration and must be downloaded before they are displayed. web fonts come in 5 different type of format ttf, eot, woff, woff2 non of them are supported by all browsers. So, we have to use all these formats in our design for font consistency.
TTF : True type font
EOT : Embedded Open Type design by Microsoft and primarily used by IE browsers.
Woff : Web Open Font Format developed in 2009
Woff2 : An upgraded version of woff with 30% less in size.
Optimization Tips anyone can implement
- Prefer websafe – if don’t have any creative font preference I will suggest you to go with websafe fonts like Arial (sans-serif),Verdana (sans-serif) see
- Host via CDN – Using CDN is always the best option for resource optimisation because of its fast content delivery and better catch policies. see
- Preload and use swap – By default fonts are delayed until page content is loaded, which is good for speed but it may effect the performance, if you check google page speed insight you may find increase in FCP result. You can customize font loading and rendering using <link rel=”preload”>, font-display:swap, or change fonts later dynamically.
- minify font file – In some cases you may reduce the font file size especially in icon fonts. you can edit font file and remove unused icon or generate only required icon file with will decrease you font file size significantly. Another way is to remove default css and link font files directly into yours and add only icon spacific class.
- Cache – fonts are not an resource which you are going to update so placing efficient cache policy can give you an decent performance.
Also Read :