Trouble accessing width axis of a variable font via the new font api | Astro Lounge | Page 1

halcyon crest May 13, 2025, 10:17 PM

#

Anyone know how to access the wdth axis of a variable font? I'm trying out the new experimental font API and can't for the life of me figure out how to access the width axis. I'm using the font Archivo and have tried both Google and Fontsource. I've also tried the font-feature-settings but not sure how that works exactly. Thanks!

#

@lament herald tagging you here as requested. 🙂

lament herald May 14, 2025, 5:30 AM

#

Thanks!

#

Why do you need access to this? The more details the better

#

If you have a public repo that can also help

halcyon crest May 14, 2025, 2:34 PM

#

I don't have a public repo, but basically I'm trying to access the width axis so I can adjust the width using the font-stretch properties within tailwind.

In Nextjs you set this within the layout file like so:

  variable: "--font-archivo",
  subsets: ["latin"],
  axes: ["wdth"],
})```

Then within my markup I can use the `font-stretch-condensed`, or `font-stretch-expanded` properties which correspond to the different widths.

#

Also I've been able to achieve this before using the astro-google-fonts-optimizer pkg. This pulls in @fontsource-variable/archivo and then I can make the width values available like so in my css:

--font-display: "Archivo", sans-serif;
--font-display--font-variation-settings: "wdth" [62.5, 75, 87.5, 100, 112.5,
    125];

lament herald May 14, 2025, 2:46 PM

#

I see

#

i think what you want is this https://docs.astro.build/en/reference/experimental-flags/fonts/#variationsettings

Docs

Experimental fonts API

#

{
  name: "Archivo",
  cssVariable: "--font-archivo",
  provider: fontProviders.fontsource()
  subets: ["latin"],
  variationSettings: "'wdth' [62.5, 75, 87.5, 100, 112.5, 125]"
}

#

Or did I misundertand? Do you actually want to reuse --font-display--font-variation-settings somewhere else?

halcyon crest May 14, 2025, 2:54 PM

#

I've tried this but can't seem to change the width within the css. Is there a way to see if the actual variable font is getting pulled in?

lament herald May 14, 2025, 3:06 PM

#

I think I'm struggling to properly understand what you want to do

#

Can you create a minimal reproduction on stackblitz or in a public gh repo?

halcyon crest May 14, 2025, 3:08 PM

#

I just want to set the font on a headline to Archivo condensed (75) and then the paragraph below to be normal (100)

#

using tailwind

#

and yeah I can try to throw something together in a bit

#

my working theory here is that the variable font isn't being loaded

lament herald May 14, 2025, 4:58 PM

#

Wait that makes me think that we are agressive in terms of default loaded weights

#

You probably need to set weight: ["100 900"] or whatever range is supported

halcyon crest May 14, 2025, 7:04 PM

#

I've tried this as well with no luck. I'll play around with it more later and throw together an example repo

halcyon crest May 14, 2025, 10:59 PM

#

Here's a sample project with tailwind and the expirimental font API https://github.com/neversitdull/variable-font-test

GitHub

GitHub - neversitdull/variable-font-test

Contribute to neversitdull/variable-font-test development by creating an account on GitHub.

lament herald May 15, 2025, 8:25 AM

#

Thanks for the repo

#

Alright so I think what you need is this:

// @ts-check
import { defineConfig, fontProviders } from "astro/config";

import tailwindcss from "@tailwindcss/vite";

// https://astro.build/config
export default defineConfig({
  vite: {
    plugins: [tailwindcss()],
  },
  experimental: {
    fonts: [
      {
        name: "Archivo",
        cssVariable: "--font-archivo",
        provider: fontProviders.fontsource(),
        subsets: ["latin"],
        variationSettings: "'wdth' [62.5, 75, 87.5, 100, 112.5, 125]",
        weights: ["100 900"],
      },
      {
        name: "Archivo",
        cssVariable: "--font-archivo-heading",
        provider: fontProviders.fontsource(),
        subsets: ["latin"],
        variationSettings: "'wdth' 75",
        weights: ["100 900"],
      },
    ],
  },
});

#

It's basically the same font but for the heading, a different variation setting

#

This will still download the same amount of files because we have proper caching/deduplication logic

#

And then for example in your tailwind css

@import "tailwindcss";

@theme inline {
  --font-heading: var(--font-archivo-heading);
  --font-body: var(--font-archivo);
}

#

Does that work for you?

halcyon crest May 15, 2025, 12:56 PM

#

Thanks for your help here. Yeah I'm fine with that implementation, however trying this I'm still not seeing the condensed font.

#

Is there a way to see which font is being pulled in. My suspicion is that it's grabbing a static version and not the variable font. I've tried both Google and Fontsource though so maybe not.

lament herald May 15, 2025, 1:05 PM

#

I think you may need to use https://docs.astro.build/en/reference/experimental-flags/fonts/#stretch for the heading

Docs

Experimental fonts API

lament herald May 15, 2025, 1:05 PM

#

halcyon crest Is there a way to see which font is being pulled in. My suspicion is that it's g...

Pretty sure it grabs the file correctly. To check, you can

#

start the dev server
go to page where you use the font component
open the devtools
check the style/links tag used in the head

halcyon crest May 15, 2025, 1:24 PM

#

Ah adding in the stretch worked

#

I would just need to add a config for each value then? Or is it possible to pass an array of strings to the stretch property?

lament herald May 15, 2025, 1:33 PM

#

Stretch is a string passed as is so you could do:

stretch: "75% 125%"

halcyon crest May 15, 2025, 1:40 PM

#

Awesome! Thanks

tired valveBOT May 15, 2025, 1:48 PM

#

If your issue is resolved, please help by doing the following two steps:

From the ellipses (3-dot menu) in the top-right corner of the post (not the first message), edit the tags to include the Solved tag.
From the same ellipses, select Close Post.
Your post will still be available to search and can be re-opened simply by replying in it. Closing a post moves it down with older posts, so we can more easily focus on issues that still need to be resolved.
Thank you for your help!

halcyon crest May 18, 2025, 12:10 AM

#

Reopening this. I thought it was working but in reality I hadn't applied the css variable to the head and the font-stretch-condensed property was just applying to the default sans font in the browser.

#

I've tried some other fonts too like Noto Sans which also has a width axis with no luck.

#

I can see the variation settings getting applied to to the fontface in the source but not sure if it's actually loading in the font with that setting.

halcyon crest May 18, 2025, 1:01 AM

#

If anyone can figure this out, I'd gladly buy them a coffee

lament herald May 18, 2025, 12:28 PM

#

It looks like you'd need to set the variableAxis option maybe? https://github.com/unjs/unifont/blob/main/src/providers/google.ts#L11-L27

GitHub

unifont/src/providers/google.ts at main · unjs/unifont

Framework agnostic tools for accessing data from font CDNs and providers - unjs/unifont

#

Example from Chris:

provider: fontProviders.google({
    experimental: {
        variableAxis: { DynaPuff: { wdth: [['75', '100']] } },
    },
}),

#

You'll need to clear the cache (remove .astro/fonts)

halcyon crest May 18, 2025, 1:57 PM

#

Thanks @lament herald for digging into this. I'm getting Unrecognized key(s) in object: 'variableAxis' when trying this. Maybe I'm formatting the config wrong though?

halcyon crest May 18, 2025, 3:01 PM

#

Alright I think I got it working

#

      {
        provider: fontProviders.google({
          experimental: {
            variableAxis: {
              Archivo: { wdth: [["62.5", "125"]] },
            },
          },
        }),
        name: "Archivo",
        cssVariable: "--font-archivo-display",
        weights: ["100 900"],
        styles: ["normal", "italic"],
        subsets: ["latin"],
      },
    ],

#

This allows me to use the font-stretch utilities within tailwind or set the wdth values via css properties

#

would definitely love for this to be easier (and documented) in the future. In nextjs you can set the axis like this which is nice.

  variable: "--font-archivo",
  subsets: ["latin"],
  axes: ["wdth"],
})```

#

Alright marking this as solved. Thanks again @lament herald ! let me know if I can buy you a coffee. 🙂

lament herald May 18, 2025, 3:59 PM

#

halcyon crest would definitely love for this to be easier (and documented) in the future. In n...

Unfortunately we can't do such thing because we can support any provider. But I'm going to try to improve unifont API upstream so it's clearer 👍

#

It also makes it tricky to document, but hopefully that will improve soon!

#Trouble accessing width axis of a variable font via the new font api