How do I add custom fonts?

1. Generate your font files

Follow this guide up until get a code snippet that looks like this:

Typekit css font embed code

2. Add the stylesheet to your theme

First, open up your theme editor (navigate to /admin/themes, click Actions on your copy of Motion, and then click Edit code. Look for and open theme.liquid inside your layout folder.

Find the line that looks like {{ 'theme.scss.css' | asset_url | stylesheet_tag }} and place your Typekit <link> tag directly above it.

3. Edit your theme's stylesheet

Now that you have your font files loaded and its name, you're ready to integrate it with your theme's stylesheet.

Find theme.scss.liquid in the assets folder and then search for this line of code with command + f on Mac and control + f on Windows:

/*================ Global | Normalize ================*/

Add these two lines below it, replacing the font-name with your newly uploaded font.

$type_base_stack: 'font-name', sans-serif;
$type_header_stack: 'other-font-name', sans-serif;

Use sans-serif or serif as the fallback depending on your font style. You can set both lines to use the same font-name if you only add one.