kawalcovid19/wargabantuwarga.com

Explore a better font loading mechanism

mazipan opened this issue · 4 comments

mazipan commented

Description

One of our problematic loading in initial load is our Inter Font

Screen Shot 2021-08-12 at 21 41 04

There are several things need to tackle:

  1. Since font are rarely change, should we treat as static file without hashing? Hashing will remove the cache in every deployment.
  2. Find a way how to preload this request, since it will be used immediately so we need to preload the request.

Tasks

  • ...
  • ...
  • ...
kelilipan commented

I can work on this.

My solution is to replace typeface-inter with self-hosted font (yes as a static file) and then Cache-Control via netlify.toml

also we can use Inter variable fonts used by vercel here (https://vercel.com/design/text) it's smaller only 38kb
https://assets.vercel.com/raw/upload/v1587415301/fonts/2/inter-var-latin.woff2
image

compared to what we use now
image

reff:

  • 👍1
  • 🎉2
  • 🚀2
zainfathoni commented

Nice, sounds good. Please proceed with this approach, @svspicious. Create a draft pull request and add a need-perf-check label on the PR to trigger the Lighthouse CI check on the changes and see its impact on the performance.

  • 🚀1
kelilipan commented

Can you help me to add the label mas @zainfathoni ?

zainfathoni commented

Can you help me to add the label mas @zainfathoni ?

Done. Let's wait for the result now.