How to add custom font to shopify theme: 4 Easy Steps

Why Custom Fonts Matter for Your Shopify Store

If you want to know how to add custom font to shopify theme, here are the quick steps:

Prepare Font Files: Get your font in web-optimized formats like WOFF or WOFF2.
Upload to Shopify: Add the font files to your Shopify admin’s ‘Files’ section.
Add @font-face Rule: Insert the @font-face CSS rule into your theme’s stylesheet to define the font.
Apply with CSS: Use the font-family CSS property to apply your font to elements like headings or body text.

You’ve perfected your products and descriptions, but a key element can make your brand stand out: your fonts. While Shopify offers hundreds of free fonts from Google and Monotype, they may not be enough for a truly unique brand identity.

A custom font aligns your store with your brand, creating a distinctive look that sets you apart from competitors.

With experience helping over 1000 businesses, we’ll guide you through the technical details of mastering how to add custom font to shopify theme and bringing your unique typography to life.

How to add custom font to shopify theme further reading:

First Things First: Prepping Your Custom Fonts

Before touching any code, you need to prepare your fonts. A custom font is your brand’s voice-it should be clear and recognizable. It’s not just about aesthetics; it builds brand consistency, improves readability, and creates a unique look for a memorable shopping experience.

While you might have fonts in .ttf (TrueType Font) or .otf (OpenType Font) formats, these aren’t ideal for websites. Web fonts need to load quickly and work across all browsers. For the best performance when learning how to add custom font to shopify theme, you should use web-optimized formats.

Here are the recommended web font formats:

WOFF (Web Open Font Format): A widely supported format with excellent compression, designed specifically for the web.
WOFF2 (Web Open Font Format 2.0): The best choice. It offers superior compression (often 30% smaller than WOFF) and is supported by all modern browsers.

For best performance, convert .ttf and .otf files into WOFF and WOFF2. Tools like the Font Squirrel Webfont Generator can easily create these web-friendly formats. Remember to generate all the variations you need, like normal, bold, and italic.

Font Licensing: Don’t Skip This Step!

Font licensing is a critical, often overlooked step. Just because you found a font online doesn’t mean you can use it on a commercial website. Most fonts have an End User License Agreement (EULA) that specifies usage rights.

For your Shopify store, you need a specific webfont license. This gives you the legal right to embed the font on your website. Using a font without the proper license can lead to legal issues. Always ensure you have the correct commercial license for any custom fonts you use.

To recap your font prep:

Choose a font that fits your brand and is easy to read.
Secure the correct webfont license-this is non-negotiable.
Convert to WOFF and WOFF2 for the best web performance.

With your prepared and legally acquired font files, you’re ready to integrate them into your Shopify theme.

The Step-by-Step Guide on How to Add Custom Font to Shopify Theme

Now for the main event: adding the font to your Shopify theme’s code. While it might seem daunting, breaking it down into simple steps makes it manageable.

Important: Always back up your theme before making code changes. In your Shopify admin, go to Online Store > Themes, click “Actions,” then “Duplicate.” This creates a safe copy if anything goes wrong.

Step 1: Upload Your Font Files to Shopify

The first step in learning how to add custom font to shopify theme is getting your font files onto Shopify’s servers. There are two common methods.

Option A: Uploading via Shopify Admin’s ‘Files’ Section

This is the quickest method for making changes directly in the Shopify admin.

Steer to ‘Files’: In your Shopify admin, go to Content > Files.
Upload: Click “Upload files” and select your WOFF and WOFF2 font files.
Copy URLs: Once uploaded, Shopify provides a unique URL for each file. Copy these URLs for the next step. They will look something like //cdn.shopify.com/s/files/1/0123/4567/files/YourFont.woff2?v=1234567890.

This method helps prevent file corruption that can sometimes occur when adding files directly to theme assets via the online editor. You’ll reference these fonts later using the file_url Liquid filter.

Option B: Uploading to the Theme’s ‘assets’ Folder

This is standard practice for developers using tools like Shopify CLI or managing themes via GitHub.

Access Theme Code: Go to Online Store > Themes. Find your theme, click “Actions,” then “Edit code.”
Locate ‘Assets’ Folder: In the sidebar, find and expand the Assets folder.
Add New Asset: Click “Add a new asset” and upload your WOFF and WOFF2 files.

This method keeps all theme resources organized in one place, which is efficient for development and version control. You’ll reference these fonts using the asset_url Liquid filter.

More info about Shopify theme customization

Step 2: How to add the @font-face CSS rule to your Shopify theme

With your fonts uploaded, you must tell the browser how to use them with the @font-face CSS rule. This rule introduces your font, giving it a name and source files.

Where to Add the CSS Code:

You’ll want to add this code to a global CSS file. Common locations include:

theme.liquid: Inside <style> tags in the <head> section. This ensures it loads on every page.
Main CSS file (e.g., base.css, theme.scss.liquid): Most themes have a primary stylesheet in the Assets folder. This keeps your styles organized. For the Dawn theme, base.css is a good choice.
A dedicated CSS snippet: Some themes use specific snippets like css-variables.liquid for styles.

The @font-face Rule Structure:

Here is a template for the @font-face rule. Replace the placeholders with your font’s details.

@font-face {
  font-family: 'YourCustomFontName'; /* A unique name for your font */
  src: url({{ 'your-custom-font-regular.woff2' | asset_url }}) format('woff2'),
       url({{ 'your-custom-font-regular.woff' | asset_url }}) format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap; /* Important for performance */
}

@font-face {
  font-family: 'YourCustomFontName'; /* Use the same name */
  src: url({{ 'your-custom-font-bold.woff2' | asset_url }}) format('woff2'),
       url({{ 'your-custom-font-bold.woff' | asset_url }}) format('woff');
  font-weight: bold; /* Define the weight for this file */
  font-style: normal;
  font-display: swap;
}

Key elements explained:

font-family: The name you’ll use in your CSS to apply the font.
src: The path to your font files. Use asset_url for files in the Assets folder or file_url for files uploaded to Content > Files.
font-weight & font-style: Defines the specific weight and style for each font file. Create a separate @font-face rule for each variant (regular, bold, italic).
font-display: swap: A key performance optimization. It tells the browser to show a fallback font while your custom font loads, preventing a “flash of invisible text” (FOIT) and making your site feel faster.

After adding your rules, save the file.

A guide to CSS font properties

Step 3: How to apply a custom font to your Shopify theme elements

Now, you need to apply your custom font to specific elements using the font-family CSS property.

Applying to Global Elements:

To apply your font to all body text or all headings for a consistent feel:

/* Example for body text */
body {
  font-family: 'YourCustomFontName', sans-serif; /* Always add a fallback font */
}

/* Example for headings */
h1, h2, h3, h4, h5, h6 {
  font-family: 'YourCustomFontName', serif; /* Add a fallback font */
  font-weight: bold; /* Apply the bold variant if defined */
}

Applying to Specific Elements:

To style a single element, you need its CSS selector.

Inspect Element: On your store, right-click the text you want to change and select “Inspect.”
Find Selector: In the developer tools, find the element’s class (like .product-title) or ID (like #main-header).

Apply CSS: Add a new CSS rule targeting that selector:

.product-title {
  font-family: 'YourCustomFontName', sans-serif;
}

CSS Specificity and the !important Flag:

If your font doesn’t apply, it might be a CSS specificity issue, meaning another rule is overriding yours. As a last resort, you can use the !important flag:

.some-element {
  font-family: 'YourCustomFontName', sans-serif !important;
}

Caution: Use !important sparingly. It makes CSS harder to debug. Try using more specific selectors first, like header h1 instead of just h1.

Fallback Fonts:

The sans-serif or serif at the end of the font-family property are fallback fonts. They ensure your text remains readable if the custom font fails to load. This is a crucial safety net.

Refresh your store, and you should see your custom font. You’ve now learned how to add custom font to shopify theme!

Best design practices for e-commerce

Troubleshooting and Best Practices

If your custom font isn’t showing up or your store feels slow, don’t worry. Here are some common issues and how to fix them when you add custom font to shopify theme.

Font Not Appearing?

If your font isn’t visible, it’s usually a quick fix.

First, double-check file paths and names. A typo in the url() in your @font-face rule or using the wrong Liquid filter (asset_url vs. file_url) is a common mistake. Ensure the name in your font-family application matches the one in the @font-face rule.

Next, check your CSS for typos like missing semicolons or curly braces. Also, clear your browser’s cache (try a hard refresh with Ctrl/Cmd + Shift + R), as browsers often cache old stylesheets. Finally, confirm your font files are in WOFF or WOFF2 format, as other formats may not be reliable.

Store Feeling Sluggish?

Custom fonts can impact performance if they are large files.

To keep your site fast, always use WOFF2 fonts for their superior compression. Also, be mindful of how many custom fonts and styles you use. Each style (regular, bold, italic) is a separate file that must be downloaded. Stick to one or two font families with only the essential styles.

Most importantly, use font-display: swap in your @font-face rule. This performance-boosting property tells the browser to show a system font immediately, then “swap” in your custom font once it loads. This prevents blank text and makes your store feel faster.

Browser Compatibility & Fallback Fonts

To ensure your font works for everyone, provide both WOFF and WOFF2 formats in your @font-face rule. This covers modern and slightly older browsers.

Always include a fallback font like sans-serif or serif in your font-family declaration (e.g., 'YourCustomFontName', sans-serif;). This acts as a safety net, ensuring your text is always readable if the custom font fails to load.

Theme-Specific Considerations

The exact CSS file to edit varies by theme. For popular themes like Dawn, check base.css or theme.css in the Assets folder. For others like Reformation, you might find rules in snippets/head-variables.liquid. Look for existing @font-face rules in your theme’s code to see how it organizes font styles.

Fonts added this way won’t appear in the theme’s typography settings in the Shopify Customizer; they are applied only through your custom code.

Thinking about your overall store design? Here are 3 Shopify Design Mistakes to Avoid

Frequently Asked Questions about Shopify Custom Fonts

Even after mastering how to add custom font to shopify theme, a few questions often remain. Let’s tackle them.

What’s the difference between hosting fonts in Shopify’s ‘Files’ section versus the theme’s ‘assets’ folder?

This choice depends on your workflow.

The ‘Files’ section (Content > Files) is like general cloud storage within Shopify. It’s great for quick edits made directly in the admin. You upload the font, get a URL, and reference it with the file_url Liquid filter. This is often the easiest and safest method for beginners, as it avoids potential file corruption issues with the online code editor.

The theme’s ‘assets’ folder is for files that are part of your theme’s code. This is the standard for developers using tools like Shopify CLI, as it keeps all theme-related files bundled together for better version control and deployment. You reference these fonts with the asset_url Liquid filter.

In short: use the ‘Files’ section for simplicity and direct admin edits. Use the ‘assets’ folder for professional theme development workflows.

Will adding custom fonts slow down my store?

Yes, custom fonts can slow your store if not optimized, as each font is a file that must be downloaded. However, you can have custom typography without sacrificing speed by following best practices.

Use WOFF2 and WOFF formats: These are compressed for the web and load quickly.
Be a minimalist: Only upload the font weights and styles you actually need (e.g., Regular and Bold). Each style is a separate file.
Use font-display: swap: This is crucial. It prevents a “flash of invisible text” by showing a system font while your custom font loads, making the page feel faster to users.
Limit font families: Stick to one or two custom font families. For less critical text, consider using system fonts (like Arial) which require no download time.

By balancing aesthetics with performance, you can use custom fonts effectively.

Do I need a special license to use a custom font on my website?

Yes, absolutely. This is critically important. Fonts are licensed software, just like any other copyrighted work. When you acquire a font, you are buying a license to use it under specific rules.

For a commercial website like a Shopify store, you need a specific webfont license. A standard desktop license (for use in design programs) does not grant you the right to embed the font on a website. They are different licenses for different uses.

Always read the End User License Agreement (EULA) carefully, even for “free” fonts, to ensure you have the rights for commercial web use. Some free fonts are for personal use only. Paid font foundries like Adobe Fonts or MyFonts will offer specific webfont licenses, which may have terms related to pageviews or domains.

Using a font without the proper license can lead to legal action and costly fees. Investing in the correct license is a necessary business expense and protects you from legal risk.

Take Your Store’s Design to the Next Level

You’re now armed with the knowledge of how to add custom font to shopify theme to make your store shine. It’s not just about a pretty font; it’s about crafting a unique identity that resonates with customers and helps your brand stand out.

While diving into theme code provides incredible design flexibility, we understand that not everyone wants to spend their time with CSS and Liquid.

That’s where Blackbelt Commerce steps in. As a leading Shopify and BigCommerce web development agency, we specialize in custom e-commerce solutions. Our teams in Los Angeles and New York craft fully customized, conversion-focused stores, handling everything from complex projects to ensuring top-rated client satisfaction. If you’re dreaming of a next-level store design but prefer to leave the coding to the pros, we’re ready to help.

Accept the power of custom typography and watch your brand come alive. Ready to explore how we can lift your Shopify store together?

Explore our Shopify theme customization services