How can I access a font in CSS after preloading it with the link tag in a bundled app? The font files always seem to get renamed.
Here is the file structure:
fonts/
font-name.woff
font-name.woff2
font-name.ttf
This is the JSX code:
{...}
<Helmet>
<link rel="preload" as="font" type="..." crossOrigin href={linkToFont1} />
<link rel="preload" as="font" type="..." crossOrigin href={linkToFont2} />
<link rel="preload" as="font" type="..." crossOrigin href={linkToFont3} />
</Helmet>
{...}
And here is the CSS code:
@font-face {
font-family: 'Font name';
src: url('./Fonts/font-name.woff2') format('woff2'),
url('./Fonts/font-name.woff') format('woff'),
url('./Fonts/font-name.ttf');
}
The fonts are successfully loaded but not applied, as I'm only seeing the fallback default font.