Skip to main content

Custom fonts

Loading fonts​

Local fonts​

If you are hosting a font yourself you'll need to add the font files to your client/src/assets directory.

You'll also need a css file in the same directory that loads the fonts using @font-face.

File structure

|- client
  |- src
    |- assets
      |- fontName
        fontFile.woff2
        fontFile.woff
        fontName.css

client/src/assets/fontName/fontName.css

@font-face {
  font-family: 'fontName';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local('fontName'), url('fontFile.woff2') format('woff2'),
    url('fontFile.woff') format('woff');
}

After that you'll need to load this css file globally in your client/src/App.js file.

import './assets/fontName/fontName.css';

Google fonts​

If you're using a hosted font, such as a Google font we recommend importing it in a css file.

Within the client/src/assets/ directory add a css file fontName.css.

In this file add the Google import code:

@import url('https://fonts.googleapis.com/css?family=Source+Sans+Pro&display=swap');

As with local fonts, you'll now need to import the css file in client/src/App.js

import './assets/fontName/fontName.css';

Using fonts​

You may want your font to be used globally or as a theme variable to be used on a component specific basis.

Global​

Adding your font globally is simple. All you need to do is edit your client/src/styling/theme.js file.

This should have a globalCss object that is later used when building your app.

export const globalCss = {
  html: {
    fontFamily:
      'fontName, sans-serif',
  }
};

Theme variables​

If you want to use the font as a variable you can simply add it to client/src/styling/theme.js.

You'll notice a font key in falconThemeV2. You can simply replace the font there.

fonts: {
  sans:
    'fontName, sans-serif',
  mono: 'Courier New, monospace'
},
Performance Boost

We really recommend using font-display: swap or &display=swap to help with render blocking and performance. Learn about font display here.