Community Post

How to add Fonts to a React Project

Michael Wanyoike

Using @font-face

Traditionally, adding a font to a website meant downloading the necessary font files into your project and creating the necessary @font-face css code to adapt to different web browsers requirements.

@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';
}

The above approach works just fine and is probably one of the best solutions if your app or website will need to run within an intranet with no Internet access.

But what if its an online website being accessed by thousands or millions of visitors everyday. You would probably look for a solution that can provide better performance and less load to your servers.

Using Hosted Fonts

The recommended solution is to load your font from a Hosted Fonts Provider like Google Fonts. The logic behind this recommendation is that browsers usually download web page resources in a sequential order before it can fully construct a page for rendering. However, if some of the page resources are on a different server, it can download them in parallel, hence a page can be loaded much faster.

Let's quickly get started with a basic react project which we shall add a font from Google Fonts. We are going to use the create-react-app tool to quickly kick-off the project. You can easily install it by executing:

npm install -g create-react-app

After you have installed the tool, we can now go ahead and create our project:

# create project
create-react-app react-web-fonts

# change directory
cd react-web-fonts

# run the project
npm start

When you the run the project, you will be greeted with a page like this: Basic React App

Let's add some content in the src/App.js file within the existing "App" div.

<div className="content">
  <h1 className="heading">
    Google Fonts in React
  </h1>
  <h2 className="subheading">
    Learn how to add fonts in a React Project
  </h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  <hr/>
  <h1>Heading 1</h1>
  <h2>Heading 2</h2>
  <h3>Heading 3</h3>
</div>

The web page should now look like this with the default fonts

Let's now pick some fonts from Google Fonts. Select any font that hasn't been installed in your machine, in my case I chose Titillium Web. I also added 2 more font weights that I like.

Titillium Web

To quickly add the fonts to our react project, simple open public/index.html and paste the embed code provided within the

tags.
<link href="https://fonts.googleapis.com/css?family=Titillium+Web:300,400,700" rel="stylesheet">

Save the file and edit the src/index.css and add this:

body {
  font-family: 'Titillium Web', sans-serif
}
.heading {
  font-weight: 700;
}
.subheading {
  font-weight: 300;
}

After saving the above file, the web page should now look like this:

Using Web Font Loader

The above approach is the simplest method of adding fonts to your web app. However, if you were to run your site on Google Page Speed to check for performance issues, that line we added in public/index.html will get flagged for the following reason: Render Blocking CSS.

The best solution I found to fix this was to use Web Font Loader, a product that is co-developed by Google and Typekit. You can use this tool to load self-hosted fonts or fonts provided through APIs. To use it, simply install it as an npm package in your project:

npm install webfontloader --save

Go to your public/index.html and comment the link we added. Open src/index.js and add the following code:

import WebFont from 'webfontloader';

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

Save the file and restart the react app. The site should appear exactly the same. However, I must warn you that when users first launch the web app, they will experience a few seconds of FOUT(Flash of Unstyled Text). Luckily, most modern browsers have caching mechanisms and this phenomenon won't occur again on subsequent reloads unless the user clears or disables the browser's cache.

If you would like to access the code used in this tutorial you can access it here

Michael Wanyoike

I like keeping it simple. I write clean, readable and modular code. I love learning new technologies that bring efficiencies and increased productivity to my workflow. Currently am into React & Javascript stuff.