CODEWITHSUNDEEP
cssreactjsfont-facecreate-react-apppreload
maracuja-juice
maracuja-juice

Reputation: 1042

Using preload with Create React App

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?

Upvotes: 7

Views: 24464

Answers (4)

GMKHussain
GMKHussain

Reputation: 4691

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>

Upvotes: 1

Santiago
Santiago

Reputation: 598

Just use this can solve the font issue:

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

Upvotes: 2

takanuva15
takanuva15

Reputation: 1686

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 ( ... );
}

Upvotes: 2

TheFastCat
TheFastCat

Reputation: 3474

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

Upvotes: 4

Related Questions