Appearance

Use a custom font ​

Note

This is an advanced customization guide that requires editing theme code. These changes 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.

Baseline uses Shopify's Font Picker to access hundreds of premium and open-source fonts. Using a font that's not available in the Font Picker requires editing the theme code. This process has two parts:

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 from the Google Fonts service, 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 the Code Editor, expand the Layout directory, and then open the theme.liquid file.

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

  5. Paste the copied snippet before the closing </head> tag.

  6. Select Save to save your file changes.

  7. Proceed to Apply the font.

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 font name used by your font file. You'll recall the font name later in this guide.

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

  3. Upload your font files, and then copy the URL for each file you uploaded.

    You'll reuse the URLs later in this guide to reference the fonts in your theme code. Keep the URLs handy for 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 Shopify admin using a ZIP archive or CLI tool, such as the Shopify Theme Kit.

    If you're using Shopify admin to upload your font files, do not upload the fonts to your Assets directory. Instead, upload the fonts to your store's Content > Files area.

    Note

    To learn more about 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 the font files in your theme:

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

  2. Inside the file, locate the opening <style> tag.

  3. After the <style> tag, add a @font-face declaration for the font file you uploaded previously.

    Your @font-face declaration should be similar to the following example:

    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;
}

    Note

    In your @font-face declaration:

    • Replace Font Name with the actual name of the font that you noted in the previous step.
    • Replace YOUR_FONT_FILE_URL with the actual URL for your font file that you copied in the previous step.
    • If you specified a font weight and style, add font-weight and font-style values to match.

    If you only uploaded .woff files, add your @font-face declaration to the top of the snippets/css-bridge.liquid file.

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

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

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

@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;
}

  5. Select Save to save your file changes.

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

  6. Proceed to Apply the font.

Apply the font ​

Note

The next steps change the font used for headings or body text by updating CSS properties defined in the snippets/css-bridge.liquid file. To learn about CSS custom properties, refer to Mozilla Developer Network: Using CSS custom properties.

To apply the font:

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

  2. Locate the lines containing --heading-font-stack and --body-font-stack.

  3. Replace the *-font-stack values with the name of the new font you declared previously. If you also declared font weights, edit the *-font-weight values to match the weights you specified.

  4. Verify that your updated snippets/css-bridge.liquid file is similar to the following example.

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

:root {
    ...
    --heading-font-stack: 'Font Name';
    --heading-font-weight: normal;
    ...
    --body-font-stack: 'Font Name';
    --body-font-weight: normal;
}

  5. Select Save to save your file changes.

  6. 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;
}
: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. Refer to Use browser inspector tools. Then, add a custom CSS rule for the element's font in a custom CSS file. Refer to Use custom CSS.