THE BEST NEWSLETTER ANYWHERE
Join 90,000 subscribers and get a daily digest of full stack tutorials delivered to your inbox directly.No spam ever. Unsubscribe any time.
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 
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 familybutton, It will download Lato font family zip file locally - Extract zip file and copy into
src/fontsfolder.
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