Opens an external site in a new window
Mental Health Awareness Month
“Community”
RODNEY LAB
  • Home
  • Plus +
  • Newsletter
  • Links
  • Profile
RODNEY LAB
  • Home
  • Plus +
  • Newsletter
  • Links

Astro Self‑Hosted Fonts Workflow: Astro Font Optimization # Astro Self-Hosted Fonts Workflow: Astro Font Optimization #

blurry low resolution placeholder image Astro Self-Hosted Fonts Workflows
  1. Home Rodney Lab Home
  2. Blog Posts Rodney Lab Blog Posts
  3. Astro Astro Blog Posts
<PREVIOUS POST
NEXT POST >
LATEST POST >>

Astro Self‑Hosted Fonts Workflow: Astro Font Optimization #

Updated 2 years ago
4 minute read
Gunning Fog Index: 6
Content by Rodney
blurry low resolution placeholder image Author Image: Rodney from Rodney Lab
SHARE:

🏡 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 📼

Astro Self-Hosted Fonts Workflow: Astro Font Optimization

🗳 Poll #

Is it ever right to use the Comic Sans font?
Voting reveals latest results.

🖥 Astro Self‑Hosted Fonts Workflow: Code #

subfont Install #

    
pnpm add -D subfont

subfont manual run #

    
pnpm exec subfont -i dist/**/index.html

subfont in your build Script #

package.json
json
    
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 // ...TRUNCATED
13 }

🔗 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.

blurry low resolution placeholder image ask Rodney X (formerly Twitter) avatar

Rodney

@askRodney

🚀 Astro’s partial hydration gives you the optimisation bug!

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.

— Rodney (@askRodney)

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.

Thanks for reading this post. I hope you found it valuable. Please get in touch with your feedback and suggestions for posts you would like to see. Read more about me …

blurry low resolution placeholder image Rodney from Rodney Lab
TAGS:
ASTROOPTIMIZATION

Likes:

Likes

  • Jessica Canepa profile avatar
  • Peter Müller profile avatar
Likes provided by Mastodon & X via Webmentions.

Related Posts

blurry low resolution placeholder image Astro Server-Side Rendering: Edge Search Site

Astro Server-Side Rendering: Edge Search Site

plus
astro
<PREVIOUS POST
NEXT POST >
LATEST POST >>

Leave a comment …

Your information will be handled in line with our Privacy Policy .

Ask for more

1 Nov 2022 — Astro Server-Side Rendering: Edge Search Site
3 Oct 2022 — Svelte eCommerce Site: SvelteKit Snipcart Storefront
1 Sept 2022 — Get Started with SvelteKit Headless WordPress

Copyright © 2020 – 2025 Rodney Johnson. All Rights Reserved. Please read important copyright and intellectual property information.

  • Home
  • Profile
  • Plus +
  • Newsletter
  • Contact
  • Links
  • Terms of Use
  • Privacy Policy
We use cookies  to enhance visitors’ experience. Please click the “Options” button to make your choice.  Learn more here.