Import local font to create-react-app project

Question

I created a React app using create-react-app and chose to not eject. Currently, I'm trying to import a local font using @font-face, but I'm not succeeding.

This is my current folder structure:

/
+ public/
+ src/
-- index.js
-- App.js
-- App.css
++ assets/
+++ css/
---- general.css
+++ fonts/
---- CircularStd-Medium.woff

On the App.js, I'm importing general.css file (import './assets/css/general.css';).

On general.css file, I'm setting the @font-face as described below:

@font-face {
  font-family: 'CircularStd-Medium';
  font-style: normal;
  src: local('CircularStd-Medium'), local('CircularStd-Medium'),
    url('../fonts/CircularStd-Medium.woff') format('woff'), 
}

I already tried following this answer, but it did't work. The code compiles, but a simple Times New Roman shows up.

Answer 1

funnily enough, Im importing the same font. It wasn't working when I had it in the public folder. So I moved it to my "router" area (because it is also pretty global). The font now goes through the build pipeline and works

require('./fonts/circular-std-master/css/circular-std.css');

Check out my repo for the code ;)

https://github.com/maltenz/malte/tree/master/src/Router

Answer 2

I keep my local fonts in /public/fonts and in the stylesheet (I use sass) the url that picked the fonts is /fonts/myfont Note the / at the beginning.

It is the same for images referenced in stylesheet (/img/myimage)