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.

Ask the community. #help

If you can't find what you're looking for, the answer might be on our community slack channel. Our team keep a close eye on this and will usually get back to you within a few hours, if not straight away. If you haven't created an account yet please sign up here slack.deity.io.