Appearance

Use a custom font ​

This guide describes how to add custom fonts to your store.

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.

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:

Add a font from an online 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:

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

To add a font from an online service:

  1. Note the name of the font that's referenced in your code snippet. You'll recall the font name later in this guide.

    In the following code snippet example, the font name is Crimson Pro.

    html
    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Crimson+Pro">

  2. Copy your code snippet.

  3. In Code Editor, open the file layout/theme.liquid.

  4. Inside the file, locate the closing </head> tag.

  5. Paste the copied snippet into a line before the </head> tag.

  6. Select Save to save your file changes.

  7. Proceed to Apply the font (the next step in this guide).

Add a font from a web font file ​

You can load a font by uploading a web font file to your store, like a .woff, .ttf, or .eot file.

Note

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, contact the font's vendor.

Upload font files to your store ​

To upload font files to your store:

  1. Note the name of the font that's referenced in your font file. You'll recall the font name later in this guide.

  2. In your store's Shopify admin, navigate to Content > Files.

  3. Upload your font file(s), and then copy the URL for each uploaded file.

    You'll reuse the URLs later in this guide, to reference the fonts in your theme code. Copy the URLs, and have them ready to reuse in the next step.

    Important

    Upload the font files to your Assets directory, if you're:

    • working with your theme offline AND
    • uploading the theme to your Shopify admin using a ZIP archive or CLI tool, like Shopify Theme Kit.

    If you're uploading font files using the online Code Editor in your Admin, do not upload the fonts to your Assets directory. Instead, upload the fonts to your store's Files area.

    Note

    To learn why you need all of the font files, refer to Chris Coyier's article CSS-Tricks: How to use @font-face in CSS.

Reference the font files in your theme ​

After you Upload font files to your store, reference the font files in your theme.

To reference font files in your theme:

  1. In Code Editor, open the file snippets/css-bridge.liquid.

  2. Inside the file, locate the opening {% style %} tag.

  3. After the style tag, to reference the font file you uploaded, add the following @font-face declaration.

    • Replace Font Name with the name of the font that you noted in the previous step.
    • Replace YOUR_FONT_FILE_URL with the URL for your font file that you copied in the previous step.

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

    css
    /* snippets/css-bridge.liquid */

@font-face {
    font-family: 'Font Name';
    src: url('YOUR_FONT_FILE_URL') format('woff');
    font-weight: normal;
    font-style: normal;
}

    To learn about @font-face declarations, refer to Mozilla Developer Network: @font-face.

  4. Verify that your @font-face declaration is similar to the following example.

    css
    /* snippets/css-bridge.liquid */

{% style %}
    @font-face {
        font-family: 'Custom Font Name';
        src: url('https://cdn.shopify.com/s/files/1/0549/8490/0692/files/custom-font.woff?v=1663802531') format('woff');
        font-weight: normal;
        font-style: normal;
    }
    :root /* ... */

  5. Select Save to save your file changes.

    Now you've a font-family value that you can reuse in CSS rules.

  6. Proceed to Apply the font (the next step in this guide).

Apply the font ​

To change the font that's used for headings or body (main) text, update the corresponding CSS custom property that's defined in the file theme.liquid.

Note

To learn about CSS custom properties, refer to Mozilla Developer Network: Using CSS custom properties.

  1. In the file layout/theme.liquid, locate the lines that contain --heading-font-stack and --main-font-stack.

  2. Replace the values with the name of the new font that you declared in the previous step.

    If you declared font weights, edit the font weight values to match the weights you specified.

  3. Verify that your edited theme.liquid file is similar to the following example.

    css
    /* layout/theme.liquid */

:root {
    --heading-font-stack: 'Font Name'; /* Same as declared heading font name */
    --heading-font-weight: normal /* Same as declared heading font weight */
    /*...*/
    --main-font-stack: 'Font Name'; /* Same as declared main font name */
    --main-font-weight: normal /* Same as declared main font weight */
}

  4. Select Save to save your file changes.

  5. Preview your store to confirm that your new font loads correctly.

Load and apply an example font ​

In the following example, a custom font named Switch Bold is loaded from a web font file named switch-bold.woff. Then, the Switch Bold font is applied as the Heading font.

css
/* snippets/css-bridge.liquid */
@font-face {
    font-family: 'Switch Bold';
    src: url('https://cdn.shopify.com/s/files/1/0549/8490/0692/files/switch-bold.woff?v=1663802531') format('woff');
    font-weight: normal;
    font-style: normal;
}

/* layout/theme.liquid */
:root {
    --heading-font-stack: 'Switch Bold'; 
    --heading-font-weight: normal;
}

In the previous example, the Switch Bold font is applied to all elements in the Heading font stack. To apply a font only to specific elements, identify the target element's CSS class by using your web browser's inspector tool. Then, add a custom CSS rule for the element's font into a custom CSS file. Refer to Use custom CSS.