-
-
Notifications
You must be signed in to change notification settings - Fork 3.3k
Font with experimental variableAxis setting fetches correctly but does not load in dev server #16023
Description
Astro Info
Astro v6.0.8
Vite v7.3.1
Node v25.3.0
System Windows (x64)
Package Manager pnpm
Output static
Adapter none
Integrations none
If this issue only occurs in one browser, which browser is a problem?
No response
Describe the Bug
When loading a Google font (specifically Recursive) with the variableAxis setting, the developer server will 404 trying to use it. The command line will 404 with
[404] /_astro/fonts/font-recursive-300-1000-oblique 0deg 15deg-latin-b700bf46346f99e2.woff2
and the in-browser console errors with
downloadable font: download failed (font-family: "Recursive-6fbe16cb0b76ff6a" style:normal weight:300..1000 stretch:100 src index:0): status=2147746065 source: http://localhost:4321/_astro/fonts/font-recursive-300-1000-oblique%200deg%2015deg-latin-b700bf46346f99e2.woff2
However, the font was fetched correctly; if I were to look in the /.astro/fonts directory, I can see the font file font-recursive-300-1000-oblique 0deg 15deg-latin-b700bf46346f99e2.woff2, which, if moved to /public/ and manually pointed to in my CSS, functions just like any other .woff2 font file would.
Steps to Reproduce
- Configure
astro.config.mjswith the following, and set the relevant<Font cssVariable="--font-recursive" />component on a.astrofile:
// @ts-check
import { defineConfig, fontProviders } from 'astro/config';
export default defineConfig({
fonts: [
{
provider: fontProviders.google(),
name: 'Recursive',
cssVariable: '--font-recursive',
weights: ['300 1000'],
styles: ['normal', 'oblique'],
options: {
experimental: {
variableAxis: {
slnt: [['-15', '0']],
CASL: [['0', '1']],
CRSV: [['0', '1']],
MONO: [['0', '1']],
},
},
},
},
],
});-
Run
astro dev, and attempt to load a page with the font. -
Confirm font file exists in
/.astro/fonts.
What's the expected result?
The font should load as-is, since it has been successfully downloaded and cached.
Link to Minimal Reproducible Example
https://github.com/lowercase-name/astro-variableAxis-repro
Participation
- I am willing to submit a pull request for this issue.