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   lt link href  https   fonts googleapis com css family Bungee Inline  rel  stylesheet  gt    And set CSS  body      font-family   Bungee Inline   cursive      However  it does not work   How can I solve this problem

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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 amp 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

User · Answer

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

User · Answer

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

User · Answer

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    lt GoogleFontLoader     fonts                          font   Bungee Inline               weights   400                       gt    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

User · Answer

In some cases your font resource maybe somewhere in your project directory  So you can load it like this using SCSS   list           quot Black quot          quot BlackItalic quot          quot Bold quot          quot BoldItalic quot          quot Italic quot          quot Light quot          quot LightItalic quot          quot Medium quot          quot MediumItalic quot          quot Regular quot          quot Thin quot          quot ThinItalic quot                   mixin setRobotoFonts          each  var in  list            font-face             font-family   quot Roboto-   var  quot             src  url  quot    fonts Roboto-   var  ttf quot   format  quot ttf quot                             include setRobotoFonts

User · Answer

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

User · Answer

It could be the self-closing tag of link at the end  try    lt link href  https   fonts googleapis com css family Bungee Inline  rel  stylesheet   gt     and in your main css file try   body div     font-family   Bungee Inline   cursive

[reactjs] How to use Google fonts in React.js?

Adding local fonts

Adding Google fonts

Examples related to reactjs

Examples related to webpack

Examples related to google-font-api