Google Fonts - variable fonts not working in Windows browsers

Question

I have a simple Next.js app that I am developing on macOS (chrome) and have only noticed something is wrong when testing on Windows (chrome, and others too).

I use the font Inter from Google Fonts, nextjs + tailwind takes care of injecting needed css in :

which after build translates to:

and tailwind config:

theme: {
    extend: {
        fontFamily: {
            sans: ['Inter var', ...defaultTheme.fontFamily.sans],
        },
    },
},

which then after build, in browsers sets following declaration to tag:

font-family:
Inter var,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji

The "Inter var" works perfectly on macOS browsers, doesn't work on Windows - it falls back to next option. When I change it to "Inter" only, it works on Windows too, but obviously, the variable font stuff is gone and everything is too thin. Rather than changing all CSS to reflect to this, why does the variable font not work on Windows? I already spend about a whole day on this and other SO posts didn't seem to work for me. Am I doing something wrong?

user_15015675 · Answer

Even though your variable font contains all weights in the woffs – you still have to add all weights by the wght@100..900 parameter to your link element like so:

Edit: You could as well select all weight styles using the google fonts UI:
Your output would be something like this:

let fontWeight = document.querySelector('#fontWeight');
let fontVariation = document.querySelector('#fontVariation');
let fontSamples = document.querySelectorAll('.fontSample');

fontWeight.addEventListener('change', function(e){
  let value = e.target.value;
  fontSamples.forEach(function(item, i){
      fontSamples[i].setAttribute('style', 'font-weight:'+value);
  } )
} );


fontVariation.addEventListener('change', function(e){
  let value = e.target.value;
  fontSamples.forEach(function(item, i){
      fontSamples[i].setAttribute('style', 'font-variation-settings: \'wght\' '+value);
  } )
  
} )

body{
font-family: georgia
}


@font-face {
    src: url('https://mdn.github.io/css-examples/variable-fonts/fonts/AmstelvarAlpha-VF.woff2') format('woff2-variations');
    font-family:'Amstelvar';
    font-style: normal;
}

.amstelvar{
     font-family: 'Amstelvar', serif;

}

.inter{
     font-family: 'Inter', 'Open Sans', sans-serif;
}
  

h1{
  font-weight: 500;
  transition: 0.3s;
}




Hamburglefonstiv (Inter)
Hamburglefonstiv (Amstelvar)


Font weight
  



font-variation-settings

Since the font-family name is defined just as "Inter" (without "var") in the retrieved @font-face declaration you should also refer to it using this name:

theme: {
    extend: {
        fontFamily: {
            sans: ['Inter', ...defaultTheme.fontFamily.sans],
        },
    },
},

Worth noting: Depending on the variable font (file) – you can style your text via font-variation-settings property.
In the example you see the "Amstelvar" font which supports additional design axis.
To change the boldness we would use:

.black{
    font-variation-settings: wght 900
}

For some reason google obviously decided to control weights as before by font-weight. Thus, changing the font-variation-settings might not have any effect on google variable fonts. This might be changed in future API Versions.

See also css-tricks.com: Getting the Most Out of Variable Fonts on Google Fonts

user_16545951 · Answer

You can download the ttf file of the font and just include the file in css.

@font-face{
    font-family: rocksalt;
    src: url('../font/RockSalt-Regular.ttf');
}

here RockSalt is a downloaded font from google fonts and imported to folder named font and use keyword "rocksalt" to add it.

Google Fonts - variable fonts not working in Windows browsers

2 Answers