With the new font API, is there a way to pick a fallback being another custom font? My situation is that I am building a multi-lingo site, and the main font will be good in English but doesn't have Chinese support, so I want to first fallback to a Chinese font, and then fallback to browser font
#Astro 6 font custom fallback
graceful granite
uneven fossilBOT
Hi @graceful granite. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
Yes, this is supported! The fallbacks configuration option accepts an array of font names, including other custom fonts you've registered. You can specify your Chinese font as the first fallback, followed by a generic browser font family.
Here's how you'd set this up:
// astro.config.mjs
import { defineConfig, fontProviders } from "astro/config";
export default defineConfig({
fonts: [
{
name: "MyEnglishFont",
cssVariable: "--font-main",
provider: fontProviders.google(),
// Fall back to your Chinese font first, then a generic family
fallbacks: ["MyChinese Font", "sans-serif"],
},
{
name: "MyChinese Font",
cssVariable: "--font-chinese",
provider: fontProviders.google(), // or whichever provider has your Chinese font
fallbacks: ["sans-serif"],
},
],
});
The fallbacks array is ordered — the first available font will be used. [font.fallbacks]
A couple of additional tips relevant to your use case:
unicodeRange: You can use this option to tell the browser to only download a font when specific Unicode characters (e.g. Chinese characters) are present on the page. This avoids unnecessary downloads of your Chinese font on English-only pages. [font.unicodeRange]optimizedFallbacks: By default, Astro generates optimized fallbacks using font metrics. If you need full control over how fallbacks behave, you can setoptimizedFallbacks: false. [font.optimizedFallbacks]