Skip to content

Font with experimental variableAxis setting fetches correctly but does not load in dev server #16023

@lowercase-name

Description

@lowercase-name

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

  1. Configure astro.config.mjs with the following, and set the relevant <Font cssVariable="--font-recursive" /> component on a .astro file:
// @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']],
          },
        },
      },
    },
  ],
});
  1. Run astro dev, and attempt to load a page with the font.

  2. 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.

Metadata

Metadata

Labels

- P3: minor bugAn edge case that only affects very specific usage (priority)feat: assetsRelated to the Assets feature (scope)

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions