# On the Origin of Cross

A browser decides to download a web font after:

1. Content is ready
1. CSS is ready
1. It appears that some content will indeed need the web font 

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. Like so:

<pre class="prettyprint">
&lt;link
  rel="preload"
  href="/SpecialElite-Regular-subset.woff2"
  as="font"
  type="font/woff2"
  crossorigin="anonymous"
/&gt;
</pre>

This way you warn the browser that the font is going to be needed very soon and the browser can download it early for you. 

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

The chunk of time (the initial download of resources) especially resources in the `head` (known as "tight mode" in Chrome) is critically important. And if you lie to the browser by making it download someting that won't be needed, it will complain. Like so:

> The resource https://highperformancewebfonts.com/SpecialElite-Regular-subset.woff2 was preloaded using link preload but not used within a few seconds from the window's load event. Please make sure it has an appropriate `as` value and it is preloaded intentionally.

We don't want that.

But we do get that if we forget the `crossorigin` in the `link` tag. **Even if the font is on the same domain.**

See for yourself with these couple of test pages:

 * [With a `crossorigin`](https://highperformancewebfonts.com/tests/xorigin/xorigin.html) - all peachy
 * [Without a `crossorigin`](https://highperformancewebfonts.com/tests/xorigin/no-xorigin.html) - two console warnings
 
Here's what the result of omitting the `crossorigin` looks like:

![Screenshot of preloading with no crossorigin](/i/posts/on-the-origins-of-cross.png)

There are two error messages: 

 * one complaining that the preload is not used and directly pointing the blame at the `crossorigin`.
 * second one complaining that the preloaded font was unused
 
Additionally **the font is downloaded twice**! So the first error message is actually kinda wrong. Found but not used, you say? Well, it's sorta used because it causes the extra download. And we know that because the "initiator" of the first download points to the `link preload`. (The second download initiator points to the ether, to the end of the html file, past the closing `/html`)

![Network initiation](/i/posts/on-the-initiation.png)


## To summarize

Always add `crossorigin`, even if the font is on the same domain. If you don't, not only you don't win anything, but you add an extra download at the worst possible time (initial tight-mode downloads)


## Browsers

Firefox and Chrome exhibit this behavior. Safari is happy without the `crossorigin`, when the font is on the same domain at least.

## `crossorigin` value

The proper use is `crossorigin="anonymous"`. The attribute `crossorigin` without a value is fine. So is `crossorigin="crossorigin"` or `crossorigin="anything your heart desires"`. They all mean `crossorigin="anonymous"`<i class="circle"><s></s></i>