ReactJS - How to add google fonts library example

In this post, How to integrate google fonts library in Reactjs application with examples. This covers an *multiple approaches to integrate google font lato into reactjs projects.

Other versions available:

React application from scratch

create-react-app command creates new applications with all files and build pipelines. It provides all latest reactjs and its dependencies.

npx create-react-app react-google-fonts
Success! Created react-google-fonts at B:\blog\jswork\react-google-fonts
Inside that directory, you can run several commands:

  yarn start
    Starts the development server.

  yarn build
    Bundles the app into static files for production.

  yarn test
    Starts the test runner.

  yarn eject
    Removes this tool and copies build dependencies, configuration files
    and scripts into the app directory. If you do this, you can’t go back!

We suggest that you begin by typing:

  cd react-google-fonts
  yarn start

Happy hacking!

This will create a react application react-google-fonts,with all required files and project structure, install dependencies to start running.

Go to application root folder, start the server using npm start

cd react-google-fonts
npm start
react-google-fonts@0.1.0 start B:\blog\jswork\react-google-fonts
react-scripts start
Compiled successfully!

You can now view react-google-fonts in the browser.

  Local:            http://localhost:3002

React application running with localhost:3002

adding Google library cdn in React application

Go to (google library)[https://fonts.google.com/] link and select the font you want to integrate into react application. Lato font is selected and given following url

https://fonts.googleapis.com/css2?family=Lato:wght@300&display=swap

Following are ways to add google font library without hosting in the application.

@import google fonts

@import css used to import external css libraries into current styles. It can be used in Global styles(app.css) or specific component stylesheet. Go to App.css in src folder. Add the following entries to enable Lado font in React applications

@import url('https://fonts.googleapis.com/css2?family=Lato:wght@300&display=swap');
html,body{
font-family: 'Lato', sans-serif;
}

link google fonts

Another approach is to add link tag in head section of public/index.html

<html>
<head>
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Lato:wght@300&display=swap" rel="stylesheet">
</head>
<body></body>
</html>

Complete React component code

import "./App.css";

function App() {
  return (
    <div className="App">
      React Google fonts library integration example
      <p>This is testing google fonts LATO in React application</p>
    </div>
  );
}
export default App;

CSS styles contains rules for font-family: Lato, sans-serif; configured in html and body

html,
body {
  font-family: "Lato", sans-serif;
}
App {
  font-size: 24px;
}

p {
  font-size: 14px;
}

And output you seen in the browser is

Add google font library in react application

hosting fonts with font-face declaration

In this approach, css fonts libraries are copied to react application. You will see how to add google fonts to stylesheets in react application.

Go to (google font Lato)[https://fonts.google.com/specimen/Lato]
Click on Download family button, It will download Lato font family zip file locally
Extract zip file and copy into src/fonts folder.

You can see project folder structure as wells as fonts folder files

In index.css file of react project, add Lato font-face declaration to enable google fonts in React application.

@font-face {
      font-family: 'Lato';
      src: local('Lato'), url('./fonts/roboto.ttf')  format('truetype'), 
    }

css properties are configure as follows

heading{
  font-family: "Lato", sans-serif;
}

Conclusion

On this tutorial, you learned different approaches to integrate google font library in Reactjs app

@import css feature
link attribute
hosting css files using @font-face declaration

Importantly, First and second approaches are simple way of adding google font library in reactjs application, However performance is not good as it is pointed to external dependencies.

Finally, host css files is good in terms of performances, less dependent and maintainability

ReactJS - How to add google fonts library example

React application from scratch

adding Google library cdn in React application

@import google fonts

link google fonts

hosting fonts with font-face declaration

Conclusion

react helmet tutorials with examples

How to add script or inline tag to react component

How to change default port in React with create-react-app command?

How to add comments to render jsx in React

React Fixing input is a void element tag and must neither have `children` nor use `dangerouslySetInnerHTML`

react input placeholder attribute examples

ReactJS, How to convert unix Timestamp to/from Date example