THE BEST NEWSLETTER ANYWHERE
Join 6,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 a *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 builds pipelines. It provides all the latest reactjs and their 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 the 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 the 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 stylesheets.
Go to App.css in the 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 contain 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 the 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 the
Download familybutton, It will download the Lato font family zip file locally - Extract the zip file and copy it into the
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
In this tutorial, you learned different approaches to integrating google font library in the Reactjs app
- @import css feature
- link attribute
- hosting CSS files using @font-face declaration
Importantly, the First and second approaches are simple ways of adding google font library in react application, However, performance is not good as it is pointed to external dependencies.
Finally, host CSS files is good in terms of performance, less dependent, and maintainability
