Introduction:
Fonts play a pivotal role in enhancing the visual appeal of your React applications. Whether you’re looking to use popular fonts from Google Fonts or your own custom font files, this guide will walk you through the steps to seamlessly integrate fonts into your React projects. Read on to discover how to achieve typography perfection!
Check out Creative Fabrica for awesome free fonts!
Before diving in, explore more in-depth articles on web development at my personal website.
Using Google Fonts in React:
Google Fonts offers a vast collection of free fonts. To use them in your React project, follow these steps:
Step 1: Visit the Google Fonts website.
Step 2: Choose your desired font(s) and click on the + Select this font button.
Step 3: In the panel that appears, you’ll see a link to include in your HTML. For example:
Step 4: In your React project, include this link in your public/index.html within the <head> tags.
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">
The index.html file will be look like this
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>React App</title>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">
</head>
Step 5: Now, you can use the font in your CSS like this by adding this in your index.css file like this
body {
font-family: ''Roboto'', sans-serif;
}
With these simple steps, you’ve now integrated Google Fonts into your React application, allowing you to utilize their extensive library of fonts seamlessly.
Downloading and Using Custom Font Files in React:
In order to include custom font files in your React app, you will first need to get the font files in the format (usually .ttf, .otf, or .woff). There are many websites where you can download free and paid fonts, such as
When downloading font files from these websites, check the licensing terms to ensure that you are allowed to use the fonts in your project. Some fonts may require attribution or may have limitations on use in commercial projects.
Including Custom Font Files in Your React Project:
Step 1: Place all your downloaded font files (e.g., .ttf, .woff, .otf, etc.) inside your public/fonts directory (you might need to create this directory).
Step 2: Add @font-face Rules
The downloaded font files will look like this in the public folder.
Font files in Public folder
In your global style sheet (e.g., index.css), define each font using the @font-face rule:
/* Roboto Black */
@font-face {
font-family: ''Roboto'';
src: url(''/fonts/Roboto-Black.ttf'') format(''truetype'');
font-weight: 900; /* Black weight is typically 900 */
font-style: normal;
}
/* Roboto Black Italic */
@font-face {
font-family: ''Roboto'';
src: url(''/fonts/Roboto-BlackItalic.ttf'') format(''truetype'');
font-weight: 900; /* Black weight is typically 900 */
font-style: italic;
}
/* Roboto Bold */
@font-face {
font-family: ''Roboto'';
src: url(''/fonts/Roboto-Bold.ttf'') format(''truetype'');
font-weight: 700; /* Bold weight is typically 700 */
font-style: normal;
}
Step 3: Apply the Font to the body Tag
To make Roboto the default font for your website or application, apply it to the body tag:
/* Setting Roboto Regular as the default font for the body */
body {
font-family: ''Roboto'', sans-serif;
font-weight: 400;
}
With this setup, the entire webpage will use the Roboto Regular variant as the default. You can adjust specific elements’ font weight to use other variants (e.g., Light, Medium, Bold, etc.) as needed.
Demo
Conclusion
Including fonts in your React app is a simple and effective way to enhance the visual appeal of your project. By using Google Fonts or custom font files, you can customize the typography of your app to match your branding and design style. We hope this tutorial has been helpful in showing you how to include fonts in your React app using both methods.
Happy coding!
