I had built a website with React.js and webpack.
I want to use Google fonts in the webpage, so I put the link in the section.
<link href="https://fonts.googleapis.com/css?family=Bungee+Inline" rel="stylesheet">
body{
font-family: 'Bungee Inline', cursive;
}
However, it does not work.
How can I solve this problem?
This question is related to
reactjs
webpack
google-font-api
If anyone looking for a solution with (.less) try below. Open your main or common less file and use like below.
@import (css) url('https://fonts.googleapis.com/css?family=Open+Sans:400,700');
body{
font-family: "Open Sans", sans-serif;
}
If you are using Create React App environment simply add @import rule to index.css as such:
@import url('https://fonts.googleapis.com/css?family=Anton');
Import index.css in your main React app:
import './index.css'
React gives you a choice of Inline styling, CSS Modules or Styled Components in order to apply CSS:
font-family: 'Anton', sans-serif;
In your CSS file, such as App.css in a create-react-app, add a fontface import. For example:
@fontface {
font-family: 'Bungee Inline', cursive;
src: url('https://fonts.googleapis.com/css?family=Bungee+Inline')
}
Then simply add the font to the DOM element within the same css file.
body {
font-family: 'Bungee Inline', cursive;
}
In some cases your font resource maybe somewhere in your project directory. So you can load it like this using SCSS
$list: (
"Black",
"BlackItalic",
"Bold",
"BoldItalic",
"Italic",
"Light",
"LightItalic",
"Medium",
"MediumItalic",
"Regular",
"Thin",
"ThinItalic"
);
@mixin setRobotoFonts {
@each $var in $list {
@font-face {
font-family: "Roboto-#{$var}";
src: url("../fonts/Roboto-#{$var}.ttf") format("ttf");
}
}
}
@include setRobotoFonts();
you should see this tutorial: https://scotch.io/@micwanyoike/how-to-add-fonts-to-a-react-project
import WebFont from 'webfontloader';
WebFont.load({
google: {
families: ['Titillium Web:300,400,700', 'sans-serif']
}
});
I just tried this method and I can say that it works very well ;)
It could be the self-closing tag of link at the end, try:
<link href="https://fonts.googleapis.com/css?family=Bungee+Inline" rel="stylesheet"/>
and in your main.css file try:
body,div {
font-family: 'Bungee Inline', cursive;
}
Google fonts in React.js?
Open your stylesheet i.e, app.css, style.css (what name you have), it doesn't matter, just open stylesheet and paste this code
@import url('https://fonts.googleapis.com/css?family=Josefin+Sans');
and don't forget to change URL of your font that you want, else working fine
and use this as :
body {
font-family: 'Josefin Sans', cursive;
}
Had the same issue. Turns out I was using "
instead of '
.
use @import url('within single quotes');
like this
not @import url("within double quotes");
like this
Here are two different ways you can adds fonts to your react app.
Create a new folder called fonts
in your src
folder.
Download the google fonts locally and place them inside the fonts
folder.
Open your index.css
file and include the font by referencing the path.
@font-face {
font-family: 'Rajdhani';
src: local('Rajdhani'), url(./fonts/Rajdhani/Rajdhani-Regular.ttf) format('truetype');
}
Here I added a Rajdhani
font.
Now, we can use our font in css classes like this.
.title{
font-family: Rajdhani, serif;
color: #0004;
}
If you like to use google fonts (api) instead of local fonts, you can add it like this.
@import url('https://fonts.googleapis.com/css2?family=Rajdhani:wght@300;500&display=swap');
Similarly, you can also add it inside the index.html
file using link
tag.
<link href="https://fonts.googleapis.com/css2?family=Rajdhani:wght@300;500&display=swap" rel="stylesheet">
(originally posted at https://reactgo.com/add-fonts-to-react-app/)
Another option to all of the good answers here is the npm package react-google-font-loader
, found here.
The usage is simple:
import GoogleFontLoader from 'react-google-font-loader';
// Somewhere in your React tree:
<GoogleFontLoader
fonts={[
{
font: 'Bungee Inline',
weights: [400],
},
]}
/>
Then you can just use the family name in your CSS:
body {
font-family: 'Bungee Inline', cursive;
}
Disclaimer: I'm the author of the react-google-font-loader
package.
In some sort of main or first loading CSS file, just do:
@import url('https://fonts.googleapis.com/css?family=Source+Sans+Pro:regular,bold,italic&subset=latin,latin-ext');
You don't need to wrap in any sort of @font-face, etc. the response you get back from Google's API is ready to go and lets you use font families like normal.
Then in your main React app JavaScript, at the top put something like:
import './assets/css/fonts.css';
What I did actually was made an app.css
that imported a fonts.css
with a few font imports. Simply for organization (now I know where all my fonts are). The important thing to remember is that you import the fonts first.
Keep in mind that any component you import to your React app should be imported after the style import. Especially if those components also import their own styles. This way you can be sure of the ordering of styles. This is why it's best to import fonts at the top of your main file (don't forget to check your final bundled CSS file to double check if you're having trouble).
There's a few options you can pass the Google Font API to be more efficient when loading fonts, etc. See official documentation: Get Started with the Google Fonts API
Edit, note: If you are dealing with an "offline" application, then you may indeed need to download the fonts and load through Webpack.
Source: Stackoverflow.com