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

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>

Beginne mit der im Issue verlinkten Referenzseite zu react-dom/preload und dem Blogbeitrag zu React 19, und finde dort die Beispiele zum Vorladen von Schriftarten sowie deren Quellinhalte. Aktualisiere die Beispiele und erläuternden Texte so, dass die erforderliche anonyme Cross-Origin-Einstellung für Schriftarten dargestellt wird, und überprüfe anschließend, dass die gerenderte Dokumentation und die HTML-Beispiele die Anleitung durchgängig widerspiegeln.