[Bug]: Resource Hints: preload, fonts, and CORS

[schalkneethling]

Summary

NOTE: I hope this is the correct place to report this, if not, please let me know and I would be happy to file it in the correct repository.

I like the added support for Resource Hints in the upcoming React 19 release but there seems to be either a bug or an oversight in the docs when it comes to preload as it relates to font loading.

Page

https://react.dev/reference/react-dom/preload

Details

The preload page uses font loading throughout the documentation page as an example use case, but nowhere does it include the use of the crossOrigin property with the anonymous value. Reading over the blog post announcing the release of React 19 beta, there is also an example using font loading which then also shows the following HTML output:

<link rel="preload" as="font" href="https://.../path/to/font.woff">

For reference: https://react.dev/blog/2024/04/25/react-19#support-for-preloading-resources

However, when preloading fonts one needs to always specify crossorigin in order for the resource hint to be respected. More details can be found on the MDN Web Docs website that covers preload.

I would have thought that perhaps React would internally automatically add this for font loading, but at the same time, it might be better for it to be a little less magical 😺 and be more explicit. In the latter case, one would need to update the examples in the docs and the release announcement post and make note of the "special" case of preloading fonts.

I believe this means that font loading should always be done as follows:

preload("https://example.com/font.woff2", {as: "font", crossOrigin: "anonymous"});

Resulting in the following HTML:

<link rel="preload" as="font" href="https://.../path/to/font.woff" crossorigin>