Custom Fonts: How to Set Them Up

Want your store to stand out and feel truly unique? Adding custom fonts is the way to go. Showcase your brand's personality, make your text pop, and create a more memorable shopping experience for your customers — without being limited to default fonts.

All custom font settings are found in Theme Settings → Typography → Custom fonts in the Theme Editor.

Step 1: Prepare your @font-face declaration

First, you need to register your font using a @font-face CSS declaration. There are two ways to do this:

Option A: Upload font files to Shopify

Go to Content → Files in your Shopify admin.
Upload your font files (recommended formats: .woff2, .woff, or .ttf).
Copy the file URL after uploading.
Write a @font-face declaration using that URL:

@font-face {
  font-family: 'MyFont';
  src: url('https://cdn.shopify.com/s/files/.../MyFont-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
}

If your font has multiple weights (e.g. Regular and Bold), add a separate @font-face block for each:

@font-face {
  font-family: 'MyFont';
  src: url('https://cdn.shopify.com/s/files/.../MyFont-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: 'MyFont';
  src: url('https://cdn.shopify.com/s/files/.../MyFont-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
}

Option B: Use Google Fonts (or other external fonts)

The recommended approach for Google Fonts is to download the font files and upload them to Shopify, then use @font-face exactly as shown in Option A. This is the most reliable method and works correctly in the Theme Editor preview.

To download Google Fonts, visit fonts.google.com, select a font, and click the download button to get the font files (.ttf or .woff2).

caution

Do not use @import or <link> inside the @font-face declarations field. The declarations field renders inside a <style> tag, so <link> tags will not work at all, and @import is not reliably supported in the Shopify Theme Editor/Customizer. Always upload font files and use @font-face.

Advanced: Loading external fonts via theme code

If you prefer to load fonts from an external CDN (e.g. Google Fonts) without downloading the files, you need to add a <link> tag directly in your theme's layout/theme.liquid file. This requires editing theme code.

In your Shopify admin, go to Online Store → Themes → Edit code.
Open layout/theme.liquid.
Find the line {{ 'custom.css' | asset_url | stylesheet_tag }} and add your font <link> tag right after it:

{{ 'custom.css' | asset_url | stylesheet_tag }}
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap" rel="stylesheet">

Save the file, then assign the font name and weight in Theme Settings → Typography → Custom fonts as described in Step 3 below.

note

This method requires code editing and will need to be re-applied after theme updates. Uploading font files (Option A) is the simpler and more maintainable approach.

Step 2: Paste the declaration into the theme

In the Theme Editor, go to Theme Settings → Typography → Custom fonts.

Paste your @font-face declaration(s) into the @font-face declarations field.

Step 3: Assign the font to theme areas

The Wonder Theme lets you assign custom fonts to 5 separate areas. For each area, you need to fill in two fields:

Area	Font name field	Font weight field	Example name	Example weight
Body	Body font name	Body font weight	`MyFont`	`400`
Headings	Heading font name	Heading font weight	`MyFont`	`700`
Navigation	Navigation font name	Navigation font weight	`MyFont`	`600`
Buttons	Button font name	Button font weight	`MyFont`	`600`
Price	Price font name	Price font weight	`MyFont`	`400`

Font name — Enter the exact font-family name from your @font-face declaration (e.g. MyFont, Inter). This must match exactly, including capitalization.
Font weight — Enter the numeric weight value (e.g. 400 for regular, 500 for medium, 600 for semi-bold, 700 for bold). The weight must correspond to one of the weights defined in your @font-face declarations.

You don't have to fill in all 5 areas — only set the ones you want to override. Areas left empty will use the default Shopify font picker selection from the Typography settings.

Example: Full setup with Inter font

Download Inter from fonts.google.com/specimen/Inter and upload the .woff2 files to Content → Files.
Paste into the @font-face declarations field:

@font-face {
  font-family: 'Inter';
  src: url('https://cdn.shopify.com/s/files/.../Inter-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: 'Inter';
  src: url('https://cdn.shopify.com/s/files/.../Inter-SemiBold.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
}

@font-face {
  font-family: 'Inter';
  src: url('https://cdn.shopify.com/s/files/.../Inter-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
}

Assign the font:

Field	Value
Body font name	`Inter`
Body font weight	`400`
Heading font name	`Inter`
Heading font weight	`700`
Button font name	`Inter`
Button font weight	`600`

For more information on all typography settings (font sizes, letter spacing, line height), see Typography.