Appearance

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

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">
<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">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Crimson+Pro">

  2. Copy your code snippet.

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

  4. Inside the file, locate the 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 Admin, navigate to Settings > Files.

  3. Upload your font files, 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 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-variables.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-variables.liquid.

    css
    /* snippets/css-variables.liquid */

@font-face {
    font-family: 'Font Name';
    src: url('YOUR_FONT_FILE_URL') format('woff');
    font-weight: normal;
    font-style: normal;
}
    /* snippets/css-variables.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-variables.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;
}
    /* snippets/css-variables.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'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 (titles) or body text, update the corresponding CSS custom property that's defined in the file snippets/css-variables.liquid.

Note

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

  1. In the file snippets/css-variables.liquid, locate the lines that contain --title-font-stack and --body-font-stack.

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

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

  3. Verify that your file snippets/css-variables.liquid is similar to the following example.

    css
    /* snippets/css-variables.liquid */

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

    --body-font-stack: 'Font Name'; /* Same as above */
    --body-font-weight: normal /* Same as above */
}
    /* snippets/css-variables.liquid */

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

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

  4. Select Save to save your file changes.

  5. Preview you 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 Title (Heading) font.

css
/* snippets/css-variables.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 {
    --title-font-stack: 'Switch Bold'; 
    --title-font-weight: normal;
}
/* snippets/css-variables.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 {
    --title-font-stack: 'Switch Bold'; 
    --title-font-weight: normal;
}

In the previous example, the Switch Bold font is applied to all elements in the Title (Heading) font stack. To apply a font only to specific elements, identify the target element's CSS class. Refer to Use web inspector. Then, add a custom CSS rule for the element's font into a custom CSS file. Refer to Customizing CSS in themes without Sass