How to Add Fonts to a React Project

Let's talk about three methods for adding fonts to our applications.

  1. Google Fonts
  2. Web Font Loader
  3. @font-face

Google Fonts provide a lot of great options for adding fonts and character to our applications.

You can quickly add a Google Font to your application by adding a <link> tag to your <head> tag inside the public/index.html file.

You can get the correct <link> tags from Google Fonts.

markup
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap" rel="stylesheet">

Add that to your public/index.html and then you can add the styles to your CSS files.

css
body {
  font-family: 'Roboto', sans-serif;
}

The above approach is the simplest way to add fonts to our React appliations. However, it is not the most efficient way to add fonts to our applications. If we ran Lighthouse on our application, we will get dinged on performance for Render Blocking CSS.

We can use Web Font Loader, a library co-developed by Google and Typekit, to increase font loading performance.

bash
npm install webfontloader

We can use this in our App.js now.

js
import WebFont from 'webfontloader';

WebFont.load({
  google: {
    families: ['Roboto:300,400,700', 'sans-serif']
  }
});

You can even use more than Google Fonts like Fonts.com, Typekit, and Adobe Edge Web Fonts.

You may experience a Flash of Unstyled Content (FOUC) when loading fonts. This is a common problem with React applications. Modern browsers will cache the fonts on subsequent loads so you can avoid this.

A third option, if you have the files for your font, is that you can place the font files in your React apps public/fonts directory.

You can then reference them directly from your CSS:

css
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/open-sans-v13-latin-regular.eot'); /* IE9 Compat Modes */
  src: local('Open Sans'), local('OpenSans'),
       url('../fonts/open-sans-v13-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/open-sans-v13-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/open-sans-v13-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('../fonts/open-sans-v13-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/open-sans-v13-latin-regular.svg#OpenSans') format('svg'); /* Legacy iOS */
}

body {
  font-family: 'Open Sans';
}

Want to improve your coding and design skills?

I'm continually researching the best practices and tools for coding.
Join 50,000+ developers looking to make cool stuff.

We value your privacy. 1-click unsubscribe.

Chris Sev

Chris Sev

Chris Sev is the co-founder of Better Dev. Coding better every day. Previously he created Scotch.io which was acquired.

Comments

What did you think of the article? Let us know!
(these comments are powered by GitHub issues and use 0 trackers)