Volto: How to add a preload for fonts that are imported by webpack

Development Plone 6 UI (Volto)
1

I'm using fontsource to self-host my fonts. I'm importing the font into theme.js like so:

import '@fontsource/public-sans/700-italic.css';

This results in a URL like so:

https://localhost:3000/static/media/public-sans-latin-700-normal.4815f9a9.woff2

Notice the 4815f9a9 at the end of the URL? This hash is added by webpack and makes it pretty difficult to add a <link rel="preload" href="{fontUrl}" as="font" t> to the HTML. Is there a reliable way of getting the hashed (and guaranteeing it matches what's imported in theme.js) URL for me to preload the font? Or will I need to deep-dive into webpack land and get webpack to add the preload for me somehow?

2

you might be able to get them by reading the sourcemap in server.jsx, but I'm not sure how you would inject that bit of extra links without customizations. Maybe with an AppExtras?

3

This can be done with the help of preload webpack plugin.