Variable font not working

[raven badger]

Hi,
I want to use variable font on my website. I have followed instructions from here: https://docs.astro.build/en/guides/fonts/#register-fonts-in-tailwind, and here: https://tailwindcss.com/docs/font-family#customizing-your-theme (im using tailwind css).

1. I installed font using npm install @fontsource/sora
2. I added import "@fontsource/sora"; in Layout.astro
3. I configured tailwind like this:

/** @type {import('tailwindcss').Config} */

const defaultTheme = require('tailwindcss/defaultTheme')

module.exports = {
    content: ['./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}'],
    theme: {
        extend: {
            fontFamily: {
                fancy: ['Sora', 'Inter', 'sans-serif', ...defaultTheme.fontFamily.sans],
            }
        },
    },
    plugins: [],
}

And regular font work fine. But when I try to use font-fancy font-extrabold, things stop working. Font is displayed with weight 600 instead of expected 800. Weight 800 should be supported according to this: https://fonts.google.com/specimen/Sora?vfquery=sora. I tried the same with Inter, still max that i could get is 600. Any ideas why its not working?

[bitter snow]

I had the same with inter-tight font. It seems the name of the font is different, in my case it was "Inter TightVariable" instead of "Inter Tight"

if you look at https://github.com/fontsource/fontsource/blob/main/fonts/google/sora/variable.css You see you have to use 'SoraVariable'

[raven badger]

when i change tailwind config to this: fancy: ['SoraVariable', 'consolas', 'sans-serif', ...defaultTheme.fontFamily.sans], font falls back to consolas

In node_modules its declared as 'SoraVariable' as you said

okay i figured it out 🎉

import "@fontsource/sora/variable.css";

i shoud use this 👆

[bitter snow]

Super!

[raven badger]

instead of import "@fontsource/sora";

and now 'SoraVariable' is working

[bitter snow]

I had the same process it took me 2h to figure out what i was doing wrong 🙂

[raven badger]

i found this in fontsource docs: https://fontsource.org/docs/variable-fonts, it helped me a lot