If you enjoyed reading this, sign up for the mailing list below and subscribe to RSS.You’re interviewing for your dream job, and you’re ready to kick some butt. That is all! I hope you enjoyed learning how to optimize your web fonts, and I hope this has helped you optimize fonts on your websites. You can implement system UI fonts through the system font stacks linked above or the system-ui font family. System fonts are great for body text or other text that isn’t important for branding, as it is built-in and makes the interface more comfortable because it is the same font as the operating system. Otherwise, you can do it by simply sending the header with your font responses. If you use a CDN like Cloudflare, it is simple to do from the dashboard. You can implement caching through the Cache-Control header. Caching allows the font to load from the disk after the first time it is downloaded. If you want to focus on fonts that computers usually have, you can check out Windows 11’s font list and macOS Catalina’s font list.Ĭaching is very important, especially if you have lots of repeat visitors. That means that users with the font get a free performance boost while adding little complexity to the code and no disadvantage to users who do not have the font locally. This checks if the user has the font locally, and if they do not, downloads it remotely. swap uses a fallback font and then switches to the custom font once it is loaded, and optional blocks page load for a maximum of 100ms to let the font load, and if it does not, it uses a fallback The two recommended values for font-display are swap and optional. Luckily, you can customize font loading through the font-display option in your declaration. Some other browsers display text using the fallback font while it is loading, ensuring text is not invisible but can cause a layout shift. That behavior is called Flash of Invisible Text, or FOIT. Or, of course, you can manually add each character, but that is a lot of work □.īy default, text will not appear in many browsers until the correct font is loading. The problem with this approach is that you need a complicated build process to get every character you use. ![]() Tools like fontTools allow you to subset fonts by arbitrary character lists. 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. 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.įont subsetting means trimming your fonts down to only the characters you need. 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. A tool like Google Webfonts Helper can be helpful for this.įonts are like images on the web because of how their formats work. 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.
0 Comments
Leave a Reply. |
Details
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |