I need to include a Google web font in the build of a React webapp using create-react-app. This is, because the app will be served on a wifi without internet access. The most straightforward solution seems to be google-fonts-webpack-plugin, but it needs a customized webpack
config.
Is there any "simple" solution that downloads and includes all the web font resources automagically without the requirement to eject from create-react-app?
To set a global font family in React, set the font-family style on the html element in your index. css file and import the file in your index. js file. Global CSS should be imported in index.
If you ask me, I recommend you to either write and maintain your own configuration or you use other React app builder like Next. js, which has custom webpack config built-in. If you use CRA, then accept the limitations and don't eject from it.
You can fetch your fonts from Google Fonts. In your React Native project src directory, you should create an assets directory. Here you'll have a directory for each kind of asset (SVG, Fonts, etc). Therefore, create a fonts directory and paste the fonts that you downloaded.
You will see how to add google fonts to stylesheets in react application. Extract the zip file and copy it into the src/fonts folder. In index.css file of react project, add Lato font-face declaration to enable google fonts in React application.
Add the following entries to enable Lado font in React applications Another approach is to add link tag in head section of public/index.html CSS styles contain rules for font-family: Lato, sans-serif; configured in HTML and body. In this approach, CSS fonts libraries are copied to react application.
cd react-google-fonts npm start [email protected] start B:\blog\jsworkeact-google-fonts react-scripts start Compiled successfully! You can now view react-google-fonts in the browser. Local: http://localhost:3002
Following are ways to add google font library without hosting in the application. @import CSS used to import external CSS libraries into current styles. It can be used in Global styles (app.css) or specific component stylesheets.
There are multiple ways of doing this.
For example, for using Roboto, do
yarn add typeface-roboto
or
npm install typeface-roboto --save
In index.js:
import "typeface-roboto";
There are npm packages for a lot of open source fonts and most of Google fonts. You can see all fonts here. All the packages are from that project.
You can download fonts from fonts.google.com
Now, you can put the font in src/fonts/Lato.woff
, and use it in your index.css
.
@font-face {
font-family: 'Lato';
src: local('Lato'), url(./fonts/Lato.woff) format('woff');
}
For ttf
font, you should give truetype
instead of ttf
as the parameter to the format
You can import this to your index.js
to make it available
import './index.css';
You can do these in App.css
, App.js
as well. It's your preference.
This answer is the updated version of @sudo bangbang's answer
Head to any font that you wish to apply in your CSS, click the Download family
to get a zip file.
Extract the zip file and move the folder into the src folder as below.
After that, refer to the below code, modify the src
to the correct URL and put in the correct format
. Here I used truetype
, based on MDN
The available types are: "woff", "woff2", "truetype", "opentype", "embedded-opentype", and "svg".
The font-family
attribute is the custom name. You can put any name you want.
@font-face {
font-family: 'primary-font';
src: url(./fonts//Sriracha/Sriracha-Regular.ttf) format('truetype');
}
.primary-font {
font-family: primary-font;
}
@fontsource
Since Typefaces project is now deprecated, we can use the alternative package by the same author FontSource
Let me use Poppins
as an example.
First, download the package
npm install @fontsource/poppins --save
Next import the package in your index.js
file
import "@fontsource/poppins";
Then use it as you wish
.primary-font {
font-family: "Poppins";
}
Supported font list is in this Github repo directory.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With