Introducing Stiletto - the essential Shopify theme to fuel your ecommerce growth. Learn more.

Add Custom Fonts

NOTE

Our Support does not cover code customizations: this tutorial is offered only as a guide. If you require assistance we recommend contacting Shopify Experts or Task Husky.

With Stiletto's custom.css file, it's possible to add custom fonts with a few edits to your theme code. Custom fonts are uploaded to Shopify Files and then applied manually to different text elements in the Code editor.

Before deciding to use a custom font, we highly recommend considering one of the hundreds of fonts in Shopify's Font Picker as your first choice, since they are fully supported by all our themes.

Custom fonts will not appear as an option in the Theme Editor's font selector.

Upload fonts to Shopify Files

All font files should be in WOFF and WOFF2 formats. While TTF and OTF can be used, they are not web-supported fonts and may cause issues. You can convert font formats with free tools like CloudConvert.

Using custom fonts may contribute to longer load-times. See our article about balancing features and customizations with your online store speed.

Steps

In your Shopify Admin:

  1. Go to Settings > Files and click Upload files to add your WOFF and WOFF2 files.

    Shopify Files with font files
    Shopify Files with font files
  2. Keep this window open for the next step.

Add fonts to custom.css

NOTE

Always duplicate your current theme before making edits to the code. Use the unpublished version to add and test customizations before publishing your theme.

Once your fonts are uploaded to Shopify Files, you can enable them by adding code to the custom.css theme file.

Steps

Open your Shopify admin in a new tab or window:

  1. Click Actions > Duplicate on your current theme to create a backup version.

  2. Click Actions > Edit code on the duplicated, unpublished theme to open the code editor.

  3. In the Assets folder, click to open the custom.css file.

  4. Copy and paste the following code on a new line:

    @font-face {
    font-family: "FONT NAME";
    src: url("FONT URL") format("woff"),
    url("FONT URL") format("woff2");
    }
  5. Replace FONT NAME with the exact name of your font. Example:

    @font-face {
    font-family: "Custom Font Name";
    src: url("FONT URL") format("woff"),
    url("FONT URL") format("woff2");
    }
  6. In your Shopify files, click the link icon to copy the URL and replace FONT URL for both the WOFF and WOFF2 formats. Example:

    @font-face {
    font-family: "Custom Font Name";
    src: url("https://cdn.shopify.com/s/files/1/0518/6692/7292/files/DMSans-Regular.woff?v=1663348292") format("woff"),
    url("https://cdn.shopify.com/s/files/1/0518/6692/7292/files/DMSans-Regular.woff2?v=1663348302") format("woff2");
    }
  7. Click Save.

Apply fonts to theme text

Once you've added your font, you can apply it manually to elements of your theme with the CSS code below.

Apply fonts globally to Logo, Headings, and Body text and/or apply fonts specifically to Navigation menus and Buttons

Example of custom CSS for headings and buttons
Example of custom CSS for headings and buttons

Logo, Headings, and Body text

Stiletto groups theme text into 3 categories: Logo, Headings, and Body. Use the code below to override the font settings in your theme editor.

Steps

In the Code editor:

  1. Copy and paste the code below on a new line in the custom.css file.

    :root {
    /*
    --font-logo: unset;
    --font-logo-weight: unset;
    --font-logo-style: unset;
    */
    /*
    --font-heading: unset;
    --font-heading-weight: unset;
    --font-heading-style: unset;
    */
    /*
    --font-body: unset;
    --font-body-weight: unset;
    --font-body-style: unset;
    */
    }

    --font-logo applies to the site title (when no logo image is used).

    --font-heading applies to headings and subheadings for pages and sections.

    --font-body applies to paragraph, navigation, product listing, and button text.

  2. For each font you want to change, replace unset with the custom font name and delete the comment tags (/* and */ on either side) . Example:

    :root {
    --font-logo: Custom Font Name;
    --font-logo-weight: unset;
    --font-style: unset;
    }
  3. (Optional.) If your font has multiple weights or styles, replace unset with the values for those properties. Example:

    :root {
    --font-logo: Custom Font Name;
    --font-logo-weight: 400;
    --font-style: italic;
    }
  4. Click Save.

    Click Preview Store to test and troubleshoot your code before publishing the theme.

The Body font applies to navigation and button text. However, you can apply fonts specifically to the Navigation menu items and Buttons.

Steps

In the Code editor:

  1. To apply fonts only to navigation menu items, paste and edit the following code on a separate line:

    .header__links-list, .navigation__submenu-list {
    font-family: "Custom Font Name" !important;
    }
  2. To apply fonts only to Buttons, paste and the following code on a separate line:

    .btn {
    font-family: "Custom Font Name" !important;
    }
  3. Click Save.

    Click Preview Store to test and troubleshoot your code before publishing the theme.

Apply fonts to specific elements

NOTE

If your require assistance, we recommend contacting Shopify Experts or Task Husky.

Applying fonts to specific elements requires knowing how to use your browser's Inspector tool and familiarity with CSS selectors.

If that sounds like you, you can find and copy the CSS selector with the Inspector tool, then edit and use the following example below:

.CSS-selector-name {
font-family: "Custom Font Name" !important;
}

Contact

🇨🇦 Fluorescent Design Inc.

Send us a message
  • Toronto OfficeMonday to Friday, 10am to 6pm ET
  • Victoria (B.C.) OfficeMonday to Friday, 10am to 6pm PT
  • Average Response Time~1 Business Day
* Excludes statutory holidays. All offices closed to the public.