Skip to content

Add "crossorigin" to the font link tag, it's required for preloading fonts

Chrome complains about this:

A preload for 'https://f-droid.org/assets/roboto_ln5c7Pv79kCZw8EjInNILddDbwVxQmaVPE0sjunCivU=.ttf' is found, but is not used because the request credentials mode does not match. Consider taking a look at crossorigin attribute.

It looks like this does need the "crossorigin" attribute, from: https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types/preload#cors-enabled_fetches

When preloading resources that are fetched with CORS enabled (e.g. fetch(), XMLHttpRequest or fonts), special care needs to be taken to setting the crossorigin attribute on your element. The attribute needs to be set to match the resource's CORS and credentials mode, even when the fetch is not cross-origin.

As mentioned above, one interesting case where this applies is font files. Because of various reasons, these have to be fetched using anonymous-mode CORS (see Font fetching requirements).

Edited by Steven McDonald

Merge request reports