Variable fonts and italics across browsers

I’m a big fan of Atkinson Hyperlegible Next and Berkeley Mono (TX-02). It is my opinion that they both look great, unique, and provide valuable legibility features.

I recently refactored this site to use the variable, web versions of these fonts. I was happy that I now had only a single @font-face definition, not a handful, and went on my way. (I had haphazardly picked up these parameters on the Internet somewhere.)

@font-face {
    font-family: 'Berkeley Mono';
    src: url('../fonts/Berkeley Mono Variable.woff2') format('woff2');
    font-stretch: 60 100;
    font-weight: 100 900;
    font-style: oblique -16deg 0deg;
    font-feature-settings: calt;
    font-variant-ligatures: contextual;
}

@font-face {
    font-family: 'Atkinson Hyperlegible Next';
    src: url('../fonts/AtkinsonHyperlegibleNextVF-Variable.woff2') format('woff2');
    font-weight: 100 900;
    font-style: oblique -16deg 0deg;
}

Then, just recently, I realized that my italics were broken on this site for weeks! They worked on Chrome as I had it configured. They did not work on Firefox.

I tried a few things.

First, I tried duplicating the @font-face definition, but with font-style: italic. This made it work on Firefox, but broke Chrome.

I then found there is a new way to specify italics for variable web fonts, specifically (assuming it is supported by the font): font-variation-settings. In the case of Atkinson Hyperlegible Next, I could get my italics looking right on both Firefox and Chrome by adding the following CSS.

em {
  font-variation-settings: "ital" 1;
  font-synthesis: none;
}

But, this didn’t work for Berkeley Mono.

I also tried things like using woff2-variations in my @font-face definitions and other little tweaks to no avail.

Finally, after more experimentation, I was pleasantly surprised that I could get everything working just by simplifying.

@font-face {
    font-family: 'Berkeley Mono';
    src: url('../fonts/Berkeley Mono Variable.woff2') format('woff2');
    font-stretch: 60 100;
    font-weight: 100 900;
    font-feature-settings: calt;
    font-variant-ligatures: contextual;
}

@font-face {
    font-family: 'Atkinson Hyperlegible Next';
    src: url('../fonts/AtkinsonHyperlegibleNextVF-Variable.woff2') format('woff2');
    font-weight: 100 900;
}

I dropped the (likely incorrect) font-style attribute. No need for the em class override, now, either.

With that, I have italics, both for my normal font, and for my monospace font that work on both Firefox and Chrome. All I needed to do was delete the right two lines.