How to use Google fonts in React.js?

Question

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.

Google Fonts

<link href="https://fonts.googleapis.com/css?family=Bungee+Inline" rel="stylesheet">

And set CSS

body{
    font-family: 'Bungee Inline', cursive;
}

However, it does not work.

How can I solve this problem?

You put the `` into the page header, not into your react app, correct? Do you specify the `font-family` anywhere else in your stylesheet or on your elements directly? — TimoStaudinger, Nov 23 '16 at 16:28
Are you using https, and do you have a security policy in place? — Stuart, Nov 23 '16 at 16:28
Actually, I do know what is the correct method of importing Google Fonts. I think I need a simple example. Can you help me... — Kevin Hsiao, Nov 23 '16 at 17:41
what does your markdown look like? are you defining other styles that might overwrite that more generic one? — manonthemat, Nov 23 '16 at 18:32
I had solved this problem..... The method I tried before was wrong. This is the correct method. [Using Google Fonts locally (in hjs-webpack and React)](http://jimthedev.com/2016/07/28/using-google-fonts-in-webpack-and-react/) However, there are still some error in the webpack process. Those two line code should be writed in **webpack.config.js** file. `{ test: /(\.css$)/, loaders: ['style-loader', 'css-loader', 'postcss-loader'] }, { test: /\.(png|woff|woff2|eot|ttf|svg)$/, loader: 'url-loader?limit=100000' }` — Kevin Hsiao, Nov 24 '16 at 17:36
Read this [simple tutorial](https://scotch.io/@micwanyoike/how-to-add-fonts-to-a-react-project) - will help anybody — vsync, Aug 31 '18 at 15:20

score 166 · Answer 1 · edited Aug 26 '19 at 05:43

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.

can you please explain why the way of using link in html head doesn't work ? — doobean, Jul 27 '20 at 12:57

Rizwan · Answer 2 · 2019-07-02T09:34:17.810

121

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;
}

edited Jul 02 '19 at 09:34

answered Dec 09 '17 at 21:11

Rizwan

3,741
2
25
22

Isn't it better to load the fonts with JS? I mean for perfomance reasons. – Simon Franzen Nov 02 '18 at 18:14
4

can you please explain why the way of using link in html head doesn't work ? – doobean Jul 27 '20 at 12:57
Very stupid but I found my custom fonts were not working because I had mistyped as follows: .body { font-family: 'Montserrat', sans-serif; } Of course that extra `.` in front of the `body` meant that it was a CSS class named `body` and not applying the font family site-wide. *face-palm. – Sez May 01 '21 at 07:13

score 32 · Answer 3 · answered Aug 08 '18 at 22:33

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;

score 20 · Answer 4 · answered Jan 19 '18 at 16:21

20

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 ;)

answered Jan 19 '18 at 16:21

aldobsom

2,341
1
13
13

This is a very nice spot! The only thing I wonder is wherein the browser are these fonts in the network panel, "Fonts" filter – Vladyn Apr 14 '21 at 06:48

score 18 · Answer 5 · answered Apr 28 '20 at 00:55

Here are two different ways you can adds fonts to your react app.

Adding local fonts

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;
}

Adding Google fonts

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/)

Fantastic answer thank you. One thing that caught me is that I used quotes inside url specifier. I used url('./src/fonts/blah.ttf') which did not work. It needed to be url(./src/fonts/blah.ttf). I know it caught me out! — Dermo909, Jun 27 '22 at 09:43

score 16 · Answer 6 · edited Feb 01 '18 at 21:23

16

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;
}

edited Feb 01 '18 at 21:23

Al.G.

4,327
6
31
56

answered Feb 07 '17 at 20:50

mrdougwright

259
3
12

7

It's @font-face if you wanted to do that and it's not necessary with Google's Font API. – Tom Feb 09 '17 at 18:25
But what if you _want_ to define your fonts in a css file, because that's where they belong? But you still want to leverage Google's hosting? Isn't it necessary then, or is there a better way? – stone Oct 15 '17 at 06:02

score 8 · Answer 7 · answered Jun 05 '19 at 13:51

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.

score 7 · Answer 8 · answered Sep 24 '21 at 14:54

I can see there are various different ways to include google fonts in react app. Let's explore the most preferred and optimum way.

@import vs link

The two options that google font provides are using link and @import. So now the question directs toward decision in between @import and link. There is already a Stack Overflow question regarding this comparison and here is a reference from the accepted answer

<link> is preferred in all cases over @import, because the latter blocks parallel downloads, meaning that the browser will wait for the imported file to finish downloading before it starts downloading the rest of the content.

So, it's most preferable to use the link tag that google font provides

How to use link and why in a react app?

I have seen few answers giving this method as a solution but I want to make it more clear why it is most preferable.

After using create-react-app to initialize the project, you can see a comment in the index.html file inside the public folder as below.

You can add webfonts, meta tags, or analytics to this file. The build step will place the bundled scripts into the tag.

So you can simply include the link tag that google font provides in the head section of the above file.

<link href="https://fonts.googleapis.com/css?family=Bungee+Inline" rel="stylesheet">

Then you can use it in the CSS file and import in JSX

font-family: 'Bungee Inline', cursive;

This is the best answer ^^ Was really helpful to make my page load faster — peter, Feb 01 '22 at 00:20

score 6 · Answer 9 · answered May 29 '18 at 18:42

6

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

answered May 29 '18 at 18:42

Deke

4,451
4
44
65

score 6 · Answer 10 · answered Nov 17 '21 at 22:50

6

In case someone needs it, you can use @fontsource. They have all of the Google Fonts and seems easier than most of the solutions here.

answered Nov 17 '21 at 22:50

Thremulant

566
5
15

score 6 · Answer 11 · answered Apr 24 '22 at 11:38

Edit index.css

@import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");

body {
  margin: 0;
  font-family: "Poppins", sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

score 4 · Answer 12 · answered Jan 06 '20 at 15:54

4

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;
}

answered Jan 06 '20 at 15:54

Jaison James

4,414
4
42
54

score 3 · Answer 13 · answered May 17 '18 at 00:16

3

I added the @import and the @font-face in my css file and it worked.

answered May 17 '18 at 00:16

Heather Akpan

41
1

1

you don't need both for google fonts, just `@import` should suffice https://stackoverflow.com/questions/48057801/google-font-import-font-face#48057885 – Luciano Aug 27 '19 at 09:53

score 3 · Answer 14 · answered Sep 07 '21 at 08:41

3

Add link tag in index.html on root directory inside public folder.

<link href="https://fonts.googleapis.com/css?family=Bungee+Inline" rel="stylesheet"/>

then use it in any css file.

answered Sep 07 '21 at 08:41

Aslam

31
1

score 2 · Answer 15 · answered Jan 12 '23 at 22:26

Create a new folder 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: 'Roboto';
   src: local('Roboto'), url(./fonts/Roboto/Roboto-Regular.ttf) format('truetype');
 }

now you can use font link this

.firstname{
    font-family: Roboto, serif;
    color: #0004;
}

score 0 · Answer 16 · answered Aug 21 '23 at 11:04

0

you Can write code in index.css file then check this work to component show this style text. this code I try

answered Aug 21 '23 at 11:04

asde fsa

1
1

1

https://meta.stackoverflow.com/a/285557/11107541 – starball Aug 21 '23 at 16:43
1

As it’s currently written, your answer is unclear. Please [edit] to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Aug 22 '23 at 22:28

score -1 · Answer 17 · answered Apr 30 '17 at 21:26

-1

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;
}

answered Apr 30 '17 at 21:26

rupert

49
1
1
7

score -2 · Answer 18 · answered Oct 14 '20 at 19:16

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();