Google Fonts

We use gatsby-plugin-google-fonts to load Google Fonts. Please check if the typeface is available via Google - and if it is, add to your project with this plugin.

Designer-provided fonts

If it is not available via Google and you have received font files from a designer - please convert the font files to WOFF and WOFF2 format via transfonter.org Then - grab the CSS stylesheet generated by Transfonter - and check it for validity. Make sure that all fonts which are different 'weights' of the same font - i.e. if you received a regular font and a bold font of the same typeface, make sure their fontFamily name is the exact same, and just change the fontWeight in the @font-face declarations. Once you've done this, rename the generated CSS file layout.css, add to the /src/layouts/ folder of the Audal Boilerplate, and import in the top of layout.js/layout.tsx.

Adding these to the Chakra Theme

Once you've imported the font itself with either Google Fonts plugin or the CSS method, you need to add the file to your /src/@chakra-ui/gatsby-plugin/theme.ts file. There is a key on the theme object called fonts - simply add your new fonts to the heading or body keys on this. If there are multiple possible fonts (and they don't fit nicely into heading or body) you can add a fontStyles key to the theme object. This fontStyles should be an object, and a key of the object should represent the font name you want to use in Chakra. This might look like:

const theme = extendTheme({
  fontStyles: {
    someFont: "Inter",
    someFont2: "Inter",
  },
});

With this, we can now use someFont and someFont2 in the fontFamily prop when we make new components with Chakra.

Adding a font-stack for fallback fonts (ESSENTIAL)

Whenever you add custom fonts to a project, it's important that you also provide some fallback options for when the client's computer doesn't support custom fonts, or their internet connection is too slow to load them

Please look at these font stacks and determine the closest match to the custom font you're using:

System (Will be a sans-serif, closest to Inter)
font-family: system, -apple-system, ".SFNSText-Regular", "San Francisco", "Roboto", "Segoe UI", "Helvetica Neue", "Lucida Grande", sans-serif;
Times New Roman-based serif
font-family: Cambria, "Hoefler Text", Utopia, "Liberation Serif", "Nimbus Roman No9 L Regular", Times, "Times New Roman", serif;
A modern Georgia-based serif
font-family: Constantia, "Lucida Bright", Lucidabright, "Lucida Serif", Lucida, "DejaVu Serif", "Bitstream Vera Serif", "Liberation Serif", Georgia, serif;
A more traditional Garamond-based serif
font-family: "Palatino Linotype", Palatino, Palladio, "URW Palladio L", "Book Antiqua", Baskerville, "Bookman Old Style", "Bitstream Charter", "Nimbus Roman No9 L", Garamond, "Apple Garamond", "ITC Garamond Narrow", "New Century Schoolbook", "Century Schoolbook", "Century Schoolbook L", Georgia, serif;
The Helvetica/Arial-based sans serif
font-family: Frutiger, "Frutiger Linotype", Univers, Calibri, "Gill Sans", "Gill Sans MT", "Myriad Pro", Myriad, "DejaVu Sans Condensed", "Liberation Sans", "Nimbus Sans L", Tahoma, Geneva, "Helvetica Neue", Helvetica, Arial, sans-serif;

Once you've found a match - add it into the Chakra Theme after your custom font. This will look like:

const theme = extendTheme({
  fonts: {
    heading: "Inter, system, -apple-system, ".SFNSText-Regular", "San Francisco", "Roboto", "Segoe UI", "Helvetica Neue", "Lucida Grande", sans-serif",
    body: "Inter, system, -apple-system, ".SFNSText-Regular", "San Francisco", "Roboto", "Segoe UI", "Helvetica Neue", "Lucida Grande", sans-serif",
  },
});