How I Solved My Font Rendering Downside

Since I redesigned this web site final yr, a difficulty with the heading font has been bugging me. I’d seen that, not like in different browsers, in Safari on iOS the headings rendered poorly, barely blurry, as in the event that they’d been faux-bolded. Googling the issue was developing with nothing, however I’m utilizing a variable font, so I figured maybe that had one thing to do with it not being a super-common subject.

I’m completely satisfied to say, I’ve figured it out and at last carried out a repair. It concerned studying a factor or two about @font-face.

The @font-face at rule is the place we specify a font to be used in our CSS. More often than not I don’t give it an excessive amount of thought. I specify just a few issues:

1. The font household (The way you wish to seek advice from it within the CSS font-family property. Often the identify of the font, however it may be something you need.)
2. The src URL and font format. Nowadays I have a tendency to simply go along with WOFF2, because it’s nicely supported. Previous browsers can fall again to a system font with no hurt to the consumer.
3. font-display. This determines what occurs in the course of the interval earlier than the font has downloaded. I’m going with font-display: swap, which in line with MDN, “provides the font face a particularly small block interval and an infinite swap interval.” In observe that implies that in the course of the font block interval (earlier than the font is downloaded) a fallback font will likely be used after a really quick delay (as much as 100ms in line with the spec), which is able to then be swapped for the desired font as soon as it’s downloaded.

@font-face {
  font-family: 'Urbanist';
  src: url('../fonts/urbanist.woff2') format('woff2');
  font-display: swap;
}

There are a variety of different properties that may be specified within the @font-face rule, not all of them mandatory in all circumstances. However with variable fonts we’d like at the very least couple of issues to ensure that our fonts to render reliably.

If our font variation is on the weight axis, we must always set a variety for the font-weight property. A spread of 100 to 800 permits us to make use of any weight in that vary (assuming they’re obtainable in our font file).

@font-face {
  font-family: 'Urbanist';
  src: url('../fonts/urbanist.woff2') format('woff2');
  font-display: swap;
  font-weight: 100 800;
}

Secondly, it’s really helpful that we set 'woff2-variations' because the font format. In observe the font rendered nice with simply the font-weight addition above, and MDN states that this isn’t strictly mandatory. However what the hell, it’s a advice, so let’s add it. Now the @font-face declaration appears like this:

@font-face {
  font-family: 'Urbanist';
  src: url('../fonts/urbanist.woff2') format('woff2-variations');
  font-display: swap;
  font-weight: 100 800;
}

And now my fonts look lovely all over the place!