#Variable Font with Experimental Fonts API

8 messages · Page 1 of 1 (latest)

pallid sluice
#

I tried to use variable font and using font-variation-settings but can't make it work. I already configured in astro.config.mjs. Here's the code:

{
    provider: fontProviders.google(),
    name: "Fraunces",
    cssVariable: "--font-fraunces",
    variationSettings: "'wght' 100, 'SOFT' 0, 'WONK' 1",
}
scarlet bisonBOT
#

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

#

Astro’s experimental fonts API does expose a variationSettings option for remote fonts, but the docs only describe it as a string that is passed through to the underlying @font-face font-variation-settings declaration. They do not provide a working example or provider‑specific caveats, and they explicitly note that some properties “may not be supported by some providers and may be handled differently by each provider.” [Remote props]

From the docs:

variationSettings: "'xhgt' 0.7"

is the documented shape, but there is no guarantee that Google Fonts (or the specific Fraunces variant you’re loading) will honor custom axes like SOFT or WONK via this API. [Remote props]

Given the available information:

  • Your config shape is consistent with the documented variationSettings type (a string with axis/value pairs).
  • Whether it “works” depends on what the provider + font actually expose and what unifont/Google Fonts support for those axes looks like, which the docs do not clarify.
  • The docs do not show any additional flags or steps needed beyond putting variationSettings on the font object in experimental.fonts. [Usage; Remote props]

So, based only on the docs:

#
  • Your Astro config is syntactically correct.
  • The knowledge sources do not explain why Fraunces + Google provider would ignore SOFT/WONK, nor do they confirm that these axes are supported through the experimental fonts API.

If you need precise control over those custom axes, the docs suggest you may need to fall back to a local font setup (via the local provider) and manage font-variation-settings yourself in CSS, but the exact steps for that with Fraunces are not covered in the provided sources.

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

#

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

pallid sluice
#

@scarlet bison Google Font support and provide all axis

scarlet bisonBOT
#

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

#

The Astro docs only state that:

  • Remote fonts can be configured with variationSettings, which is a string passed through to @font-face font-variation-settings. Example:

    variationSettings: "'xhgt' 0.7"

    [Remote props (2025-04-24)]

  • Remote fonts are powered by unifont, and “some properties may not be supported by some providers and may be handled differently by each provider.” [Remote props (2025-04-24)]

  • Google Fonts is one of the built‑in providers, and Astro’s google() provider accepts all options from unifont’s Google ProviderOption, but the Astro docs do not enumerate which variation axes are supported or how to request “all axes” from Google. [Available providers]

Because of this, I can’t confirm from the docs that:

  • Google Fonts via Astro’s experimental fonts API will expose all variable axes for a given font, or
  • there is a specific option to “enable all axes” beyond using variationSettings as a string.

All we can say from the available information is:

  • Your usage of variationSettings is in the correct format for Astro/unifont.
  • Whether Google Fonts actually honors all the axes you specify (like SOFT, WONK, etc.) is provider‑specific behavior that the Astro docs do not document.

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