12/22/2023 0 Comments Adobe font kit state park fontIn the last few years, we’ve added support for asynchronous font loading, language based subsets, HTTP/2, and just last week CSS kits.īut there’s even more you can do on your end to improve performance, which is just one of the topics I get into in the Webfont Handbook - released earlier today with A Book Apart. If you aren’t sure where to begin with your own site, these three optimization tips are a great place to start. I’ll walk through these in a little detail today, but do check out the book for a whole lot more. The default JavaScript embed code will load all fonts and variations in a kit, even if you don’t use them. You can significantly reduce your kit size if you remove fonts and variations you don’t use. While you’re in the kit editor, take the opportunity to take a look at your subsetting options. The “All Characters” subset delivers the entire font to your site and usually results in a large kit size. You can reduce the size of your kit by switching to the Default subset, or by using a language-based subset. It’s worth pointing out that subsetting can also be very dangerous. If you accidentally remove characters that you actually need they’ll show up in a fallback font. When in doubt, the Default subset with OpenType Features checked is the right choice. The default JavaScript embed code will load the JavaScript kit in a render-blocking way. However, once the JavaScript loads, the kit will load the fonts asynchronously. Why wait for the JavaScript to load? You’ll get better performance and the same behavior by switching to the advanced embed code the advanced embed code will load both the fonts and JavaScript asynchronously. One downside of loading fonts asynchronously is that you’ll need to manage the flash of unstyled text (FOUT) yourself. Typekit has excellent documentation on font events, and the Webfont Handbook goes into great detail on tricks to minimise FOUT. Web fonts are a critical component of your site’s performance you want your content to appear as soon as possible and preferably in the correct font. You can help the browser prioritize resources by using preconnect and preload resource hints. Preconnect is used to tell the browser that you’ll soon connect to a hostname. Once the browser sees the preconnect hint, it opens a connection in the background, so it’s ready to use. Then by the time the browser comes across the Typekit embed code (you’re using the advanced embed code, right?), it can re-use the connection to Typekit’s font network. Doing this can easily save several seconds. Preload is another resource hint, which not only creates a connection but actually downloads the resource as well so it’s right there when you need it. This can be useful to preload Typekit’s JavaScript or CSS file. Preconnect and preload hints are especially useful when you’re using the advanced embed code or a CSS kit.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |