Hacker News Reader

Comment by oefrha | Hacker News Reader

IMO a font specimen site may be the worst place to use font-display: swap. Was wondering why I was looking at what seemed indistinguishable from Courier, turns out what I saw was exactly Courier.

View on HN

For those not in the know (or who didn't suffer through having to write CSS manually): font-display: swap changes the default behavior from "No text visible until font been loaded" to "Display fallback font until specified font is available", meaning you'll see Courier until Iosevka loaded properly, or Courier forever if the font file failed to load.

I'm guessing the website author added that after some "website performance tool" recommended it, as they make sweeping generalizations that don't always make sense in every context, and "always add font-display: swap so text is readable earlier" is now a dogmatic rule "web developers" (mechanical or wetware ones) add without thinking, so that precious performance number goes up.

I think the dogmatism stems from Google, which delivers this advice as unconditional instruction and often gets parroted, makes the main website grading tool that calls it an error, and says they’ll drive less traffic to you if their grading tool rates you poorly.

Also, I think also led by Google, `font-display: block;` actually behaves the same as swap now, just with a longer wait for the font to load [1]. Iosevka’s webpage does use swap, though.

[1]: https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/A...

I was wondering why it did that. This is really the kind of site where this is not a feature you should use.

Funny. Last I heard everyone wanted to specifically prevent the behavior of showing unstyled content before assets are loaded.

On my iPad, I’m pretty sure Fira Code and IBM Plex in the example box are displaying as Courier. They’re certainly both identical.

I had thought that was an intentional animation to show the different weights and variants

was also confused...

Reply on news.ycombinator.com