Optimizing Fonts in Astro JS for Better PageSpeed Insights Score

Tags: Astro JS, Web Performance, Tailwind CSS

a screenshot showcasing google pagespeed insight result in red warning because of fonts loading

Context or Problem

I recently changed my blog homepage wsa.my.id, then tested it again using Google Page Speed Insight. The result was around 86, and I got warnings about “Render blocking requests” and “Network dependency tree”.

I figured out the issue: I was using Inter font directly from their official CDN . I didn’t use Google Fonts either (and not sure if that would be much better). When I tried to fix this, I checked the official Astro JS documentation about setting fonts .

Experiment

So I decided to use the Fontsource approach instead and see what I get.

My site is currently hosted on Vercel (though maybe I’ll move to Cloudflare Workers & Pages later).

First, installed the package:

Terminal window
npm install @fontsource-variable/inter

Then imported it inside my main layout:

---
import TopNav from "../components/TopNav.astro";
import '@fontsource-variable/inter';
import "../styles/global.css";
interface Props {
  title: string;
}


const { title } = Astro.props;
---


<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width" />
    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
    <meta
      name="description"
      content="WSA That Random WordPress Guy On Internet"
    />
    <meta name="generator" content={Astro.generator} />
    <title>{title}</title>
  </head>
  <body
    class="grid min-h-dvh items-center bg-linear-to-br/longer from-zinc-950 via-zinc-900 via-50% to-zinc-950 text-neutral-300"
  >
    <TopNav />
    <slot />
  </body>
</html>

Then removed the old CDN import in my CSS file:

/* Using direct rsms css CDN */
@import url("https://rsms.me/inter/inter.css");
@import "tailwindcss";
@plugin "@tailwindcss/typography";


@theme {
  --font-sans:
    "Inter Variable", "Inter", ui-sans-serif, system-ui, sans-serif,
    "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  /*"liga" 1, "calt" 1 used to fix for Chrome */
  --font-sans--font-feature-settings: "liga" 1, "calt" 1, "ss02", "ss08";
}


.prose code {
  @apply bg-[#1e1e2f] font-mono text-sm text-[#c1c1cb];
  margin-block: -0.125rem;
  padding: 0.125rem 0.375rem;
}

And just see if it works.

Outcome

a screenshot showcasing google pagespeed insight result in full green 100 score after Optimizing font

And yup, it worked! 🎉

Now I got a full 100 score on all metrics in Google Page Speed Insights.

Possible Next Steps

Next thing to do? Maybe optimize image files — should be fun!

References