#Broken fonts after migrating experimental fonts API to stable.

1 messages · Page 1 of 1 (latest)

empty willow
#

I was using Experimental fonts api in astro.config.ts file in Astro version 5.
Now I switched to Astro version 6 and that fonts api is now stable.

The problem: after migration it makes my font ugly by displaying Polish symbols like "ą", "ś", "ę" and so on as different font. It looks like font is not covering them properly.

I am 100% sure that font Quando covers these symbols. How to use that fonts api now??

pastel narwhalBOT
#

Hi @empty willow. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

#

Fixing Polish Character Display with Astro v6 Fonts API

The issue is almost certainly related to font subsets. By default, Astro only downloads and preloads the "latin" subset, which does not cover Polish diacritics like ą, ś, ę, etc. Those characters are part of the "latin-ext" subset.

Fix: Add latin-ext to your subsets

Update your font configuration in astro.config.ts to include "latin-ext":

import { defineConfig, fontProviders } from "astro/config";

export default defineConfig({
  fonts: [{
    provider: fontProviders.google(), // or whichever provider you use for "Quando"
    name: "Quando",
    cssVariable: "--font-quando",
    subsets: ["latin", "latin-ext"], // <-- this is the key fix
  }]
});

[font subsets config]

Why this happens

The subsets option defines which character sets are downloaded and preloaded. The default is ["latin"], which covers basic Latin characters but not Central/Eastern European characters like Polish diacritics. Adding "latin-ext" ensures those glyphs are included from your chosen font. [font subsets config]

Also make sure to apply the font in your page <head>

Don't forget to use the <Font /> component in your layout's <head>:

---
import { Font } from "astro:assets";
---
<Font cssVariable="--font-quando" preload />

[Font component]

Then use the CSS variable in your styles:

body {
  font-family: var(--font-quando), serif;
}
#

Adding "latin-ext" to subsets should resolve the fallback font being used for Polish characters.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

#

@empty willow Kapa.ai is still learning and improving, please let me know how I did by reacting below.

empty willow
#

@pastel narwhal so why it worked fine in astro v5 without "subsets" ?

pastel narwhalBOT
#

Let me check the knowledge base for you again. One moment! :books:

#

The knowledge sources do not contain enough information to answer this precisely. I cannot find any documentation explaining differences in default subset behavior between the experimental fonts API in Astro v5 and the stable version in Astro v6.

It's possible that the experimental implementation handled subsets differently, but I cannot confirm this from the available documentation. I'd recommend:

  1. Checking Astro's changelog on GitHub for any subset-related changes between the experimental and stable fonts API.
  2. Opening an issue on Astro's GitHub if you believe this is a regression.

Regardless of the cause, adding "latin-ext" to your subsets config is the correct fix going forward with the stable API. [font subsets config]

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

#

@empty willow Kapa.ai is still learning and improving, please let me know how I did by reacting below.

empty willow
#

@pastel narwhal generate for me a markdown message for another LLM model with instructions how to fix it.

pastel narwhalBOT
#

Let me check the knowledge base for you again. One moment! :books:

#

I'm designed to answer questions about Astro directly to you — generating prompt messages for other AI models is outside the scope of what I do here.

However, the fix itself is straightforward. Based on the previous conversation, here's a summary you can copy:

Problem: Polish characters (ą, ś, ę, etc.) render in a fallback font after migrating from Astro v5 experimental fonts API to the stable API in Astro v6.

Cause: The default subsets value is ["latin"], which does not include Polish diacritics. These are part of the "latin-ext" subset.

Fix: Add "latin-ext" to the subsets array in your font configuration:

import { defineConfig, fontProviders } from "astro/config";

export default defineConfig({
  fonts: [{
    provider: fontProviders.google(),
    name: "Quando",
    cssVariable: "--font-quando",
    subsets: ["latin", "latin-ext"],
  }]
});

[font subsets config]

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: