Preload fonts for FOUT

[dvnrsn]

I'm trying to figure out the best approach to preload fonts. Currently loaded like so

@font-face {
  font-family: 'Signature';
  font-display: swap;
  font-weight: 350;
  src: url('./fonts/Signature/book.woff2') format('woff2');
}

This loads http://localhost:3000/build/_assets/book-OM4VH4TL.woff2
or eventually https://cdn.shopify.com/oxygen-v2/129/build/_assets/book-OM4VH4TL.woff2

In the interest of reducing Flash of Unstyled Text which is hurting our core web vitals performance score I was thinking to preload the fonts. So I added font file to public/fonts and then amended root

const links = () => {
return [
  {
    rel: 'preload',
    href: '/fonts/Signature/book.woff2'
    as: 'font',
    type: 'font/woff2',
    crossOrigin: 'anonymous' as const,
  }

This works great locally but on preview/prod the problem is the CSS url function points at https://cdn.shopify.com not the active domain because that is where Hydrogen seems to put assets including import stylesheet from '~/styles/tailwind.css';

I was thinking to point everything using a FQDN to prod public folder but that seems inefficient and requires CSP changes I'd rather not introduce.