Why does Safari render Roboto Flex so thin, at 400 font weight?

Question

Safari renders my font-weight: 400 text very thin, versus the same on firefox. This is Firefox:

This is safari:

Surprisingly, this even happens on the Google Fonts site. Check out the difference between these two paragraphs, with the same styles:

Changing font-weight: 400 to font-weight: 300 in Safari actually makes the text significantly thicker. It's only a font-weight of 400 that causes the issue. This is the case in the Google Fonts editor too, where you can change the weight between 400 and 100, and notice no difference.

Now that I type this up, I realize that maybe this is an actual bug in the font or something, and that this should maybe be reported to Google Fonts instead, but since it works in Firefox and Chrome, I'm not so sure.

Answer 1

I It seems to be a bug with "Optical Size". If you disable that option weight 400 gets rendered as expected, for me at least. Although you could argue it is a different font then.

Edit

As a workaround I created an extra style with the typetester and a weight of 404 and leaving out the default weight 400 in the "Specimen" section. Now even the optical sizing is back.

Answer 2

Currently, google's API uses some user agent detection (a.k.a browser sniffing) to provide backwards compatibility (for browsers that don't support variable fonts).
Unfortunately, this doesn't work very well:
some Browsers like Opera (flawlessly supporting VF) will also receive static fonts.

Besides, the UI is not very helpful to get the correct URL including all design axes.
So you need to insert the correct range selector query parameters like so:

https://fonts.googleapis.com/css2?family= +
Inter +
: + slnt + , + wght (design axis names)+
@ + -10..0 + , + 100..900 (design axis range values)

Workaround: Copy the variable @font-face rules manually

Open the API URL in firefox:
https://fonts.googleapis.com/css2?family=Roboto+Flex:opsz,slnt,wdth,wght,GRAD,XTRA,YOPQ,YTAS,YTDE,YTFI,YTLC,YTUC@8..144,-10..0,25..151,100..1000,-200..150,323..603,25..135,649..854,-305..-98,560..788,416..570,528..760

Copy the returned rules in your css file:

/* latin */
@font-face {
  font-family: 'Roboto Flex';
  font-style: oblique 0deg 10deg;
  font-weight: 100 1000;
  font-stretch: 25% 151%;
  src: url(https://fonts.gstatic.com/s/robotoflex/v9/NaPccZLOBv5T3oB7Cb4i0zu6RME.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

slider_weight.addEventListener("input", function() {
  var axisValue = slider_weight.value;
  testarea.style.fontWeight = axisValue;
  value_weight.innerText = axisValue;
});

slider_width.addEventListener("input", function() {
  var axisValue2 = slider_width.value;
  testarea.style.fontStretch = axisValue2 + '%';
  value_width.innerText = axisValue2;
});

@font-face {
  font-family: 'Roboto Flex';
  font-style: normal;
  font-weight: 100 1000;
  font-stretch: 0% 200%;
  src: url(https://fonts.gstatic.com/s/robotoflex/v9/NaNeepOXO_NexZs0b5QrzlOHb8wCikXpYqmZsWI-__OGfttPZktqc2VdZ80KvCLZaPcSBZtOx2MifRuWR28sPJtUMbsFEK6cRrleUx9Xgbm3WLHa_F4Ep4Fm0PN19Ik5Dntczx0wZGzhPlL1YNMYKbv9_1IQXOw7AiUJVXpRJ6cXW4O8TNGoXjC79QRyaLshNDUf9-EmFw.woff2) format('woff2');
}

html {
  font-family: 'Roboto Flex';
}

.w100 {
  font-weight: 100
}

.w400 {
  font-weight: 400
}

.w1000 {
  font-weight: 1000
}

#testarea {
  font-size: 2em;
  transition: 0.5s;
  font-weight: 100;
  font-stretch: 0%;
}

<h1 class="w100">Roboto 100</h1>
<h1 class="w400">Roboto 400</h1>
<h1 class="w1000">Roboto 1000</h1>

<p id="testarea" contenteditable="true">Type something ...</p>

<label for="slider_weight">Weight</label>
<input type="range" id="slider_weight" name="slider" value="100" min="100" max="1000" step="10">
<span id="value_weight">100</span>
<br>

<label for="slider_width">Width</label>
<input type="range" id="slider_width" name="slider" value="0" min="0" max="200" step="1">
<span id="value_width">0</span>

Further reading: Getting Variable Fonts from Google Fonts