🏡 Why Self‑Host Fonts? #
In this video on Astro self-hosted fonts workflows, we look at how you might be able to reduce shipped font file size by 80%. So you’ve already seen, one advantage of self-hosting is shipping fewer bytes to your site visitors’ browsers. Though, you can add a search query to Google web font download URLs to get a similar reduction (if you stick with the Google CDN). So a real advantage of self-hosting is that the user browser has to connect to fewer origins and using HTTP/2 some optimizations can be made, downloading fonts in tandem with other files.
Typically, you will get most benefit from self-hosting if your site is hosted on a CDN, like Netlify or Cloudflare. This will let your user download the fonts from a server closer to them, often referred to as ‘the edge’. As well as self-hosting, we look at optimizing the shipped fonts, removing characters that aren’t used on the page. On top, we see how you can avoid a flash of invisible text (FOIT). We keep the full font set as a fallback, since although Astro builds static sites, you can add dynamic content, and want to make sure that content also appears in your chosen font.
Anyway, enough detail, why not hit play on the Astro self-hosted fonts video already! The first few minutes just talk about self-hosting, and the rest focuses on Google web font optimization.
📹 Astro Self‑Hosted Fonts Workflow: Video #
Please enable JavaScript to watch the video 📼
🗳 Poll #
🖥 Astro Self‑Hosted Fonts Workflow: Code #
subfont Install #
subfont Install #pnpm add -D subfont
subfont manual run #
subfont manual run #pnpm exec subfont -i dist/**/index.html
subfont in your build Script #
subfont in your build Script #1 {2 "name": "astro-scroll-to-anchor",3 "version": "0.0.1",4 "private": true,5 "scripts": {6 "dev": "astro dev",7 "start": "astro dev",8 "build": "astro build && subfont -ir --root dist",9 "preview": "astro preview",10 "format": "prettier --write --plugin=prettier-plugin-astro ."11 },12 // ...TRUNCATED13 }
🔗 Astro Self‑Hosted Fonts Workflow: Links #
- Learn how to add scroll to anchor in Astro
- Font Best Practices from web.dev
- Making Google Fonts Faster in 2022
- Google Webfonts Helper
- Font Style Matcher: can help with layout shifts
- Twitter handle: @askRodney
🏁 Astro Self‑Hosted Fonts Workflow: Summary #
Does web font self-hosting work for every site? #
- Typically, you will get most benefit from self-hosting fonts if your site is behind a CDN. Services like Netlify and Cloudflare are helpful here. The only way to know for sure, if you will get a speed pickup for your site, is to run some tests. As well as looking at self-hosting, see how much benefit you would gain by reducing the number of fonts and weights on your site.
How does font optimization work? #
- Font package files include all the possible characters by default. Typically, your site will not use all of those characters. Examples might be some punctuation never used in the language you write in. By excluding these characters from the shipped font files you save on the amount of data the user has to download, improving user experience because the site can load faster. You can get a huge saving (80% or 90%) by optimising fonts only used in a title. This is because the title will probably not use most of the characters included by default.
Is there an easy way to optimize web fonts? #
- When self-hosting fonts, the subfont package is a nice choice for small sites. You can run it in place once your site is ready to ship. With a site builder like Astro, this will involve adding a post-build step. subfont will scan through HTML and find characters not used. It strips these from the original font sets, resulting in a smaller shipped package. It keeps the original font set as a fallback, which will be important if your site has dynamic content.
🙏🏽 Feedback #
If you have found this video useful, see links below for further related content on this site. I do hope you learned one new thing from the video. Let me know if there are any ways I can improve on it. I hope you will use the code or starter in your own projects. Be sure to share your work on Twitter, giving me a mention, so I can see what you did. Finally, be sure to let me know ideas for other short videos you would like to see. Read on to find ways to get in touch, further below. If you have found this post useful, even though you can only afford even a tiny contribution, please consider supporting me through Buy me a Coffee.
🚀 Astro’s partial hydration gives you the optimisation bug!
— Rodney (@askRodney)
If you want another way to improve UX, try self‑hosting fonts:
- it works best if your site is behind a CDN (like Netlify or Cloudflare),
- can shave 80% off shipped font files,
- is easy using subfont.
March 21, 2022
Finally, feel free to share the post on your social media accounts for all your followers who will find it useful. As well as leaving a comment below, you can get in touch via @askRodney on Twitter and also askRodney on Telegram . Also, see further ways to get in touch with Rodney Lab. I post regularly on SvelteKit as well as Search Engine Optimization among other topics. Also, subscribe to the newsletter to keep up-to-date with our latest projects.