Firefox not displaying variable font face

Question

I'm tweaking a theme for a Hugo static site and repurposing the <code> blocks for easy text highlighting. This involves re-styling the <code> element in css:

.markdown code {
  font-family:'Public sans','sans serif';
  padding: 7px 4px 4px 7px;
  background:var(--highlight);
}

This works just fine in Chrome-based browsers. I personally use the latest Firefox on Ubuntu 22.04, though, and I get this result:

The <p> text renders just fine as Public Sans (self-hosted variable font, although I also have it installed for use on my desktop environment, which is probably why it's displaying properly in most of the text) but FF renders the <code> text as the fallback sans serif. The error mentioned in the FF debug console says downloadable font: no supported format found (font-family: "public sans" style:normal weight:100..900 stretch:100 src index:2) source: (end of source list) There's no difference whether I'm testing on my localhost hugo server or viewing the published site on my domain.

Here's how I included the self-hosted font in the css:

@font-face {
  font-family: 'Public sans';
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: local(''),url('fonts/PublicSans-Italic-VariableFont_wght.ttf') format('ttf supports variations');
  src: local(''),url('fonts/PublicSans-Italic-VariableFont_wght.ttf') format('ttf-variations');
  }

@font-face {
  font-family: 'Public sans';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: local(''),url('fonts/PublicSans-VariableFont_wght.ttf') format('ttf supports variations');
  src: local(''),url('fonts/PublicSans-VariableFont_wght.ttf') format('ttf-variations');
}

I fiddled around in the debug console and I found that FF only displays 400 and 700 weight of Public Sans--500 and below render as 400 weight, and 600 and up render as 700, further proof that it's not loading the variable font. (Note: I have all weights of Public sans installed in my local desktop environment, so this is yet another quandary.)

If I use the Google-hosted version of the font, it loads fine:

@import url('https://fonts.googleapis.com/css2?family=Public+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

Again, the self-hosted variable font works just fine in every other browser. Can anybody see what's going wrong here? I could just use the Google hosted fonts, but I'd rather not on principle.

Answer 1

You format value format('ttf-variations') is not valid.
You can either omit it or just use format(truetype). But invalid format identifiers will disable the font-face rule completely.

fontWeight.addEventListener('input', (e) => {
  document.body.style.fontWeight = e.currentTarget.value;
})

@font-face {
  font-family: 'Public sans';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('https://fonts.gstatic.com/s/publicsans/v15/ijwRs572Xtc6ZYQws9YVwkNBdp_yw_k0.ttf') format('truetype');
}

body {
  font-family: 'Public sans';
  font-size: 20vmin;
  line-height:1rem;
  font-weight: 900;
}

<p style="font-family:sans-serif; font-size:12px">Font-weight: <br><input type="range" id="fontWeight" value="100" min="100" max="900" step="1"></p>
<p>Hamburgefons</p>

BTW. https://fonts.googleapis.com/css2?family=Public+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap will return @font-face rules for static fonts.

To retrieve the variable fonts you need to use the .. range selector syntax like so:

https://fonts.googleapis.com/css2?family=Public+Sans:[email protected]

See also: "Subset a variable font to only include required axis"