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.

Malte Schulze-Boeing · Accepted Answer · 2018-06-23 12:08:50Z

5

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

answered Jun 23, 2018 at 12:08

Malte Schulze-Boeing

1,15511 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Rajendran Nadar Over a year ago

Lol even I am importing the same font in 2019

Rahman Haroon Over a year ago

That repo page is not available @Malte Schulze-Boeing

j0nd0n7 · Accepted Answer · 2018-11-13 18:52:04Z

1

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)

answered Nov 13, 2018 at 18:52

j0nd0n7

927 bronze badges

Collectives™ on Stack Overflow

Import local font to create-react-app project

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related