How to find what font a Shopify store uses (and add it to yours)

First, confirm the store runs on Shopify

You saw a store with type that feels right, and you want the same look on yours. Before you chase the font, spend ten seconds checking that the store is on Shopify at all. A font from Shopify’s own library is one click away in your theme editor. The same font on another platform may need a license or an upload.

• Right-click the page and choose View page source, then search for cdn.shopify.com or /cdn/shop/. Shopify stores load their images, scripts and theme files from these paths.
• In the same source, search for Shopify.theme. On most stores this line names the theme, for example Dawn. If you like the whole look and not only the font, the theme name is worth writing down.

Also check that the words you care about are live text. Try to select a few letters with your cursor. If they highlight one by one, every method below works. If the whole banner moves as one block, it is a picture, and you need a font identifier that reads images instead.

Identify the font on the store

Your browser can name the font without installing anything. Here is the manual route in Chrome, Edge or Brave.

1. Right-click the heading or product title you like and choose Inspect. The Elements panel opens with that element selected.
2. In the side pane, switch from Styles to the Computed tab and find font-family. That is the list of fonts the theme asked for, in order of preference.
3. Scroll to the very bottom of the Computed tab. The Rendered Fonts section names the font the browser is actually drawing, and says whether it came from the network or from your computer.
4. Repeat for body text, buttons and prices. Stores often use one family for headings and another for everything else.

The name in font-family and the name under Rendered Fonts can differ. When they do, the first choice failed to load and you are looking at a fallback. We cover that in font stacks and fallbacks, and the full DevTools walkthrough is in how to find a font with Chrome DevTools.

The faster route: click the text

With Font Inspector, click the toolbar icon and choose Pick text on page, or press Alt + Shift + F (Option + Shift + F on Mac). Hover the product title and click it. The panel shows the family, the font actually rendered, the weight, the size in px, em and rem, the line height, the letter spacing and the colors. If the store was already open when you installed the extension, refresh the tab once.

To get the whole picture in one go, open Fonts on this page. It lists every family on the page ranked by how much text uses it, with the weights and sizes in use. More on that in how to see all fonts on a page.

Is it a Shopify library font or a custom font?

Shopify ships a font library with every store. According to Shopify’s developer documentation it contains system fonts and a selection of Google fonts, and those fonts are free to use on all Shopify online stores. If the store uses one of them, you can have it in your theme in a minute. Anything else was added by hand, and you will have to do the same with your own license.

The font file’s address tells you which case you have. Open DevTools, go to the Network panel, filter by Font and reload the page. Each row is one font file. Look at where it loads from.

Library file names are readable. A file such as assistant_n4 followed by a long code is the family Assistant, normal style, weight 400. An n7 is weight 700 and an i4 is italic 400. That is a quick way to see which weights the store loads.

Font Inspector’s Get this font section saves you the Network panel. For fonts served by Google Fonts or Adobe Fonts it opens the family there. For self-hosted files it lists the files the page loads, so you can read the same path clues. The check for other hosts is described in is it Google Fonts or Adobe Fonts?.

Set the font in your own theme

If the font is in the library, you do not touch any code. Shopify’s help center describes the path like this.

1. In your Shopify admin, go to Online Store, then Themes.
2. Find the theme you want to change and click Edit theme. This opens the theme editor.
3. Click the Theme settings icon, then click Typography.
4. In the Headings or Body section, click Change. Search for the family you identified, click its name, then click Select.
5. Adjust the Font size scale slider if the text needs to be larger. It runs from 100% to 150% in steps of 5%.
6. Save, then check a product page, a collection page and the cart on your phone.

The exact options depend on your theme’s developer. Some themes add separate pickers for buttons, menus or prices, and some expose letter spacing and uppercase switches too. The picker also has a group of system fonts. Those are already installed on your visitors’ devices, so nothing is downloaded and the store loads a little faster.

Pick the same weights the original store uses. A heading set in 600 looks very different from the same family in 400, and the picker usually offers each weight as a separate entry.

Add a custom font you have licensed

A font that is not in the library will not show up in the theme editor’s picker, because the picker only lists Shopify’s own fonts. You add it in code. This is a small job, but it is code: duplicate your theme first so you have a copy to go back to, or hand these steps to a developer.

1. Buy or download the font with a license that covers web use, and get the .woff2 files. You need one file per weight and style, unless it is a variable font.
2. In your admin, go to Content, then Files, and upload the font files. Shopify’s developer documentation recommends this over uploading fonts to the theme’s assets folder through the admin code editor, because that route can corrupt some font files.
3. Go to Online Store, then Themes, open the menu next to your theme and choose Edit code.
4. Open layout/theme.liquid and add an @font-face rule inside a style tag in the head. It has to live in a Liquid file, because the file_url filter that finds your upload only runs there.
5. Point your theme’s font settings at the new family, save, and preview.

<style>
  @font-face {
    font-family: "Brand Serif";
    src: url("{{ 'brand-serif-regular.woff2' | file_url }}") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
  }

  /* Dawn and themes built on it read these variables */
  :root {
    --font-heading-family: "Brand Serif", Georgia, serif;
  }
</style>

How you apply the family depends on the theme. Dawn and many themes based on it use the CSS variables --font-heading-family and --font-body-family. Other themes need a plain rule that sets font-family on h1, h2 and h3. Inspect your own heading to see which one your theme uses. If you work on the theme locally with Shopify’s developer tools, you can keep the files in assets and use the asset_url filter instead.

Our @font-face generator writes the rule for every weight you upload, and the font stack builder helps you choose fallbacks that keep the layout steady while the file loads. Every custom font is an extra download before text appears, so load only the weights you use.

Match the size, weight and spacing too

The family name is half the look. Note the size, line height and letter spacing while you are inspecting.

• Heading size and weight. Write down the px size of the product title and the main page heading, plus the weight number.
• Body size and line height. These two decide how easy the product descriptions are to read. See how to measure them in how to find font size and line height.
• Letter spacing and case. Small uppercase labels with open spacing are a common store pattern for navigation and badges.
• Color. Body text is often a dark gray, not pure black. Copy the HEX value.

Theme settings work in scales and presets, not raw pixels, so you will not hit the numbers exactly without custom CSS. Get the family and weights right first, then move the font size scale until headings feel the same next to your product photos. If you do write CSS, the px to rem converter keeps your values consistent.

Check the license before you publish

Identifying a font is always fine. Using it is a licensing question. Fonts from Shopify’s library are free to use on Shopify online stores, and Google Fonts are open source, so both are safe choices. A commercial typeface needs a web font license from the foundry or a reseller, usually priced by traffic, and an online store counts as commercial use. The details are in font licensing explained.

Never download the font files from the other store’s server and upload them to yours. The files are easy to reach, but that does not make them yours to use. If the original is out of budget, look for an open typeface with similar proportions. Font Inspector suggests free look-alikes for popular paid fonts, and our free alternatives pages list them by font. Similar is not identical, so test the candidate with your own product names before you commit.