Instead of subsetting by wide character ranges, you can subset to include precisely what you use. The size reduction is beneficial for performance, but you can do even better if you are willing to take on more complexity. If you remove all characters outside of the English language, the size is reduced to just 16kb! There are many ways to subset fonts, including Google Fonts (and by extension, Google Webfonts Helper), Everything Fonts, and fontTools. ![]() However, chances are you are not using all of those languages. If you include all languages, which includes the Latin alphabet, Cyrillic, Vietnamese, and Greek, the size of the WOFF2 font is 95kb. For example, take Inter, one of the most popular fonts. The simplest way to do this is subsetting to remove languages that you do not use. Subsetting can yield massive amounts of size savings without having any drawbacks as long as you are not using the characters you remove. Subset your fontsįont subsetting means trimming your fonts down to only the characters you need. Additionally, web fonts are almost universally supported:Īt this point, because of the almost universal browser support, the best thing to do is use WOFF2 with a WOFF fallback, although you could even just use WOFF2, as ~96% of users support it. Similarly, web fonts have WOFF and WOFF2, which provide superior compression to formats like TrueType and OpenType (TTF and OTF). With images, modern web formats like AVIF and WebP replaced less compressed formats like PNG and JPEG. Use modern web font formatsįonts are like images on the web because of how their formats work. A tool like Google Webfonts Helper can be helpful for this. However, you can reduce how many requests are needed to just one by self-hosting the font and putting the declaration inside your CSS bundle instead of an external stylesheet. Performance is bad because Google Fonts has a complicated string of requests to get a font, which adds significant latency.Īs you can see, the font loading with Google Fonts can be complicated. Google Fonts is excellent for prototyping, as it is straightforward. That means the website is using Google Fonts to load fonts. When you go on a website and look at the HTML, you often see something like this: Here are ten tips to improve font loading performance on a website. ![]() Fonts are often hundreds of kilobytes and are hosted on another domain, slowing down the website. ![]() However, there are many performance implications with fonts on the web. Most modern websites use custom fonts, usually from Google Fonts, because they add a custom touch to the interface and allow for more options. Web fonts performance 10 ways to speed up web font loadingįonts are popular tools on the web nowadays.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |