Search code examples
cssreactjsfontspreloadingreact-helmet

use preloaded bundled font in react

i wonder how do i access a font in CSS, when i preloaded it with link in a bundled app, font files get renamed always.

File structure is

fonts/
  font-name.woff
  font-name.woff2
  font-name.ttf

JSX code is

{...}
<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>
{...}

CSS code is

@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');
}

fonts are loaded successfully, but not applied, i'm seeing just the fallback default font.

Solution

  • well did not find any ways around that, solved by uploading font to a corporate CDN