0

CSS, JS, images etc are all fetched as no-cors. What's different about web fonts?

Per the spec:

For font loads, user agents must use the potentially CORS-enabled fetch method defined by the [FETCH] specification for URL's defined within @font-face rules. When fetching, user agents must use "Anonymous" mode, set the referrer source to the stylesheet's URL and set the origin to the URL of the containing document.

3

This mechanism exists mainly as a way for font creators to control which websites can access their possibly copyrighted and licensed products.

As MDN puts it:

... Web Fonts (for cross-domain font usage in @font-face within CSS), so that servers can deploy TrueType fonts that can only be cross-site loaded and used by web sites that are permitted to do so.

As a note this decision was not always welcomed and for a time Chrome didn't require the CORS header for webfonts.

As for why this is different for CSS and JS one reason is the history of the CORS header. CSS and JS predate the introduction of CORS and to apply restrictions to them retroactively would have broken many existing sites. Webfonts on the other hand are relatively new and there was less reason not to apply the same-origin rule.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.