Switch Themes Help

# Use a custom font

Note

This is an advanced customization guide that requires editing theme code. These actions are not supported by Switch Themes or Shopify. We recommend hiring an expert if you’re not comfortable editing Liquid, HTML, CSS, and Javascript.

Before you customize a theme, make a backup. Refer to Shopify help: Duplicating themes (opens new window).

Our themes use Shopify’s Font Picker to access hundreds of premium and open source fonts. Using a font that’s not available in Font Picker requires editing the theme code. This is a two-step process:

# Load the font

You can load the font from a font service or from a web font file.

# Load from a font service

If you use a font service like Adobe Fonts, Fonts.com, TypeNetwork, Cloud.Typography, or Google Fonts, you’ll have a code snippet, similar to the following:

<link rel="stylesheet" href="https://use.typeservice.net/a1b2c3d4.css">

Copy your code snippet. In the Code Editor, open the file theme.liquid. Paste the snippet into a line before the closing </head> tag. Then, proceed to Apply the font (the next step in this guide).

# Load from a web font file

Note

Please ensure your font license allows embedding fonts into a website, and that your traffic is within the page view limits stated by your license. If you’re unsure, please contact the font vendor.

You can load a font from a web font file, like a .woff, .ttf, or .eot file.

In the Code Editor, navigate to the Assets folder for your theme. Select Add a new asset. Use the Upload file tab to select and upload a font file. To add more than one font, upload one font file at a time.

To understand why you need all of the font files, refer to Chris Coyier’s article CSS-Tricks: How to use @font-face in CSS (opens new window)

Next, add the font file(s) into the snippets/css-variables.liquid file, with a @font-face declaration. Make sure that the declaration is after the opening <style> tag. Refer to Mozilla Developer Network: @font-face (opens new window)

If you uploaded .woff files only, add the following to the top of snippets/css-variables.liquid.

@font-face {
    font-family: 'Font Name'; /* Enter your preferred name for the font. */
    src: url('{{ 'Exact-name-of-the-file-you-uploaded.woff' | asset_url }}') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Font Name'; /* Same as above */
    src: url('{{ 'Exact-name-of-the-file-you-uploaded-italic.woff' | asset_url }}') format('woff');
    font-weight: normal;
    font-style: italic;
}

@font-face {
    font-family: 'Font Name'; /* Same as above */
    src: url('{{ 'Exact-name-of-the-file-you-uploaded-bold.woff' | asset_url }}') format('woff');
    font-weight: bold;
    font-style: normal;
}

Now you have a font-family value that you can use in CSS rules.

# Apply the font

To change the font that’s used for headings or body text, simply update the CSS custom property defined in the file snippets/css-variables.liquid. To learn about CSS custom properties, refer to Mozilla Developer Network: Using CSS custom properties (opens new window)

In the file snippets/css-variables.liquid, locate the lines that contain --heading-font-stack and --body-font-stack. Replace the values with the new font that you declared.

:root {
    --heading-font-stack: 'Font Name'; /* Same as above */
    --heading-font-weight: normal /* Same as above */

    --main-font-stack: 'Font Name'; /* Same as above */
    --main-font-weight: normal /* Same as above */
}

Here’s a complete example of adding a custom font named Switch Bold, and applying it as the heading font:

@font-face {
    font-family: 'Switch Bold';
    src: url('{{ 'switch-bold.woff' | asset_url }}') format('woff');
    font-weight: normal;
    font-style: normal;
}
:root {
    --heading-font-stack: 'Switch Bold'; 
    --heading-font-weight: normal;
}

If you do not want to apply a font to all the elements covered by the font stack, find the target element’s CSS class, and then add a custom rule to the stylesheet theme.scss.liquid. Refer to Using the web inspector.

← Use custom CSS →