Using preload with Create React App

Question

I'm trying to use preload for a font in a project that was bootstrapped with create-react-app.

I added this tag to my index.html file:

<link rel="preload" href="%PUBLIC_URL%/myFontFile.woff2" as="font" type="font/woff2">

But my problem is that I don't know how to reference this font file from my CSS (in the @font-face url). The CSS file is not in the public folder.

A different option might be to put the font file into /src but then I don't know what the file name of my font file is in the preload tag because it gets assigned a random id when there is a new version of it & webpack builds the project.

I know that I can put the CSS together with the font file into the public folder but that will mean that this CSS doesn't get bundled.

What is the best approach to get preload to work with create-react-app (no eject) and have the CSS with the @font-face declaration bundled together with the other CSS files?

Or if this is not really possible: what are my alternatives where I can get a similar behaviour to preload for my font loading?

score 4 · Answer 1 · edited Jan 05 '22 at 15:19

4

You should check out this article from CSS tricks for font optimization first, but I believe your font should be in your public dir when using create react app. I use mine along with the LoadCSS library

<link rel="preload" href="./style/Atlan-Bold.woff" as="font" type="font/woff2" onload="this.onload=null;this.rel='stylesheet'" crossorigin>

directly after this call I have my css file which references this font as so:

<link rel="preload" href="./style/style.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
<noscript><link rel="stylesheet" href="./style/style.css"></noscript>

and in this css I reference

@font-face {
  font-family: 'Atlan Bold';
  src: url('Atlan-Bold.woff') format('woff')
}

additionally here is some info for using in Chrome: Preloading fonts in Chrome with 'preload' link directive

edited Jan 05 '22 at 15:19

Chris

33
6

answered Apr 20 '18 at 22:48

TheFastCat

3,134
4
22
32

And your stylesheet is then also in the public folder? (Which is a solution that I referenced in my question but is not preferred) – maracuja-juice Apr 22 '18 at 07:27
1

I have minimal, critical css directly in the HTML header, I also have a preloaded css file from the public folder(along with the WOFF font) within the HTML body. No repeated css - just diversified/split based on need and lading requirements. – TheFastCat Apr 23 '18 at 01:31

score 2 · Answer 2 · answered May 18 '22 at 01:14

Just wanted to add this answer since I was dealing with a similar issue with my create-react-app. My app has an html5 canvas which uses a custom font, but the font would only download after the first rendering of the canvas which meant that the user would see the wrong font until they triggered 2 updates to the canvas.

I found the webfontloader utility (developed by TypeKit and Google) which can load fonts on-demand (along with a bunch of other neat stuff).

npm i webfontloader @types/webfontloader

In my case, I wanted to load the font only when the user navigates to the url path which contained the canvas, so I added this useEffect code snippet to the relevant functional component (it triggers only once on the first component load):

import WebFont from 'webfontloader';

export default function CanvasDraw() {
  // trigger download of custom font immediately on 1st render so that canvas uses it
  useEffect(() => {
    WebFont.load({
      custom: {
        families: ['My CustomFontFamily'],
      },
    });
  }, []);

  ...

  return ( ... );
}

score 1 · Answer 3 · answered Sep 14 '22 at 07:51

1

Just use this can solve the font issue:

useEffect(() => {
  document.fonts.load("12px Merriweather").then(() => setIsReady(true));
}, [])

answered Sep 14 '22 at 07:51

Santiago

448
3
12

score 0 · Answer 4 · answered Sep 27 '22 at 11:37

0

Add react-meta-tags by npm i react-meta-tags

import MetaTags from 'react-meta-tags';

<MetaTags>
    <title>Any Title Optional</title>
    <link rel="preload" href="/assets/font-family-name.woff2" as="font" type="font/woff2" crossorigin />
</MetaTags>

answered Sep 27 '22 at 11:37

GMKHussain

3,342
1
21
19

Using preload with Create React App

4 Answers4