How to add fonts to create-react-app based projects?
There are two options:
Using Imports
This is the suggested option. It ensures your fonts go through the build pipeline, get hashes during compilation so that browser caching works correctly, and that you get compilation errors if the files are missing.
As described in “Adding Images, Fonts, and Files”, you need to have a CSS file imported from JS. For example, by default src/index.js
imports src/index.css
:
import './index.css';
A CSS file like this goes through the build pipeline, and can reference fonts and images. For example, if you put a font in src/fonts/MyFont.woff
, your index.css
might include this:
@font-face {
font-family: 'MyFont';
src: local('MyFont'), url(./fonts/MyFont.woff) format('woff');
/* other formats include: 'woff2', 'truetype, 'opentype',
'embedded-opentype', and 'svg' */
}
Notice how we’re using a relative path starting with ./
. This is a special notation that helps the build pipeline (powered by Webpack) discover this file.
Normally this should be enough.
Using public
Folder
If for some reason you prefer not to use the build pipeline, and instead do it the “classic way”, you can use the public
folder and put your fonts there.
The downside of this approach is that the files don’t get hashes when you compile for production so you’ll have to update their names every time you change them, or browsers will cache the old versions.
If you want to do it this way, put the fonts somewhere into the public
folder, for example, into public/fonts/MyFont.woff
. If you follow this approach, you should put CSS files into public
folder as well and not import them from JS because mixing these approaches is going to be very confusing. So, if you still want to do it, you’d have a file like public/index.css
. You would have to manually add <link>
to this stylesheet from public/index.html
:
<link rel="stylesheet" href="%PUBLIC_URL%/index.css">
And inside of it, you would use the regular CSS notation:
@font-face {
font-family: 'MyFont';
src: local('MyFont'), url(fonts/MyFont.woff) format('woff');
}
Notice how I’m using fonts/MyFont.woff
as the path. This is because index.css
is in the public
folder so it will be served from the public path (usually it’s the server root, but if you deploy to GitHub Pages and set your homepage
field to http://myuser.github.io/myproject
, it will be served from /myproject
). However fonts
are also in the public
folder, so they will be served from fonts
relatively (either http://mywebsite.example/fonts
or http://myuser.github.io/myproject/fonts
). Therefore we use the relative path.
Note that since we’re avoiding the build pipeline in this example, it doesn’t verify that the file actually exists. This is why I don’t recommend this approach. Another problem is that our index.css
file doesn’t get minified and doesn’t get a hash. So it’s going to be slower for the end users, and you risk the browsers caching old versions of the file.
Which Way to Use?
Go with the first method (“Using Imports”). I only described the second one since that’s what you attempted to do (judging by your comment), but it has many problems and should only be the last resort when you’re working around some issue.
Import local font to create-react-app project
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
Related Topics
How to Change Angular Material Table Row Height
Child Inside Parent With Min-Height: 100% Not Inheriting Height
Vertical Align Center in Bootstrap 4
On a CSS Hover Event, How to Change Another Div'S Styling
Can Media Queries Resize Based on a Div Element Instead of the Screen
Css '≫' Selector; What Is It
Detect If an Input Has Text in It Using CSS - on a Page I Am Visiting and Do Not Control
Why Does Order of Transforms Matter? Rotate/Scale Doesn't Give the Same Result as Scale/Rotate
Should I Avoid Using !Important in Css
How to Make an Element Fill the Remaining Viewport Height
Margin-Top Not Working For Span Element
How to Center an Absolutely Positioned Element in a Div
How to Have Multiple Background Images Using Css
Border-Radius in Percentage (%) and Pixels (Px) or Em
How to Set the Stacking Order of Pseudo-Elements Below Their Parent Element