On the Origin of Cross

January 27, 2025

A browser decides to download a web font after:

  1. Content is ready
  2. CSS is readyIt appears that some content will indeed need the web font
  3. It’s often late enough in the page rendering that the content in question is initially rendered in a fallback font (or not shown at all, depending on font-display). To prevent this you can preload the font using an HTTP header or a link in the head of the document.

This article is about the importance of crossorigin part of the code above.

Source: On the Origin of Cross

The performance and UX impact of web fonts can be subtle and tricky. Here’s you can preload a font and avoid some pitfalls.