How To Add Custom Fonts in Shopify
Introduction
Your store’s typography does more than display words; it creates personality. Fonts influence how customers perceive your brand: professional, playful, modern, or luxury. Shopify themes come with built-in font choices, but what if the font you love isn’t there?
Good news: you can still use it! With a few simple steps (and no advanced coding required), you can add custom fonts to your Shopify store.
Why Use Custom Fonts in Shopify?
Fonts are used to:
- Make your store's brand identity by using unique fonts.
- Improve readability and design.
-
Align your store’s typography with your brand’s logo.
Methods for Adding Custom Fonts
There are different methods to add custom fonts in Shopify, some of which are given below.
- Add Custom Fonts through Shopify Admin
- Add Google Fonts
- Install Shopify Apps
While editing your theme, you may also find these tutorials useful:
Method 1: Add Custom Fonts via Shopify Admin
This is the most common and easy way to add custom fonts to your Shopify store. Upload your font files to the file directory Shopify Admin > Content > Files. After adding the font file, add the @font-face code into your base.css file, depending on the theme, at the end of the file. Follow the step-by-step guide to add custom fonts.
Step 1: Navigate to Shopify Admin > Contents > Files.
Step 2: Upload your font file (.woff, .woff2, ttf, .otf). Preferably use (.woff, .woff2).
Step 3: Copy the font file URL.
Step 4: Navigate to Online store > Themes > Edit code.
Step 5: Go to the base.css file depending on the theme.
Step 6: Add this code at the end of the file.
@font-face {
font-family: 'MyCustomFont';
src: url('yourfile.woff2') format('woff2'),
url('yourfile.woff') format('woff');
font-weight: normal;
font-style: normal;
}
Step 7: Apply your font to your theme.
body {
font-family: 'MyCustomFont', Arial, sans-serif;
}
h1, h2, h3 {
font-family: 'MyCustomFont', serif;
}
Step 7: Save the changes.
Method 2: Add Google Fonts
If you want to use free fonts from Google Fonts, you can also add a Google font to your theme. In this case, you don’t need to upload any files. Follow these steps to add Google fonts to Shopify.
Step 1: Navigate to Google Fonts, select the font, and click the Get font button.
Step 2: Click on the Get embed code button.
Step 3: Copy the code.
Step 4: Navigate to Online store > Themes > Edit code.
Step 5: Go to the theme.liquid file and paste this code before the </head> tag.
Step 6: Apply the font to the theme
body {
font-family: "Jost", sans-serif;
}
Step 7: Save the changes.
Method 3: Install Shopify Apps
Want a no-code method? Then Shopify apps are a better way to add custom fonts without any coding knowledge. There are different Shopify apps; some of these are as follows.
Follow these steps to install the Shopify app to add custom fonts.
Step 1: Navigate to Shopify Admin > Apps.
Step 2: Click the Apps and sales channel settings button.
Step 3: Visit the Shopify app store.
Step 4: Search for the fonts app like Fontify: Google & Custom Fonts.
Step 5: Install the app.
Step 6: Reconfirm the install in the Shopify Admin.
Step 7: Add the custom font, and click the Create a new font button.
Step 8: Add the font type, either upload or a Google font.
Step 9: Select the font and click Confirm.
Step 10: Select the elements to apply fonts.
Step 11: Save the changes.
Step 12: Enable the app embed and save the changes.
Also Read: How Much Does It Cost to Hire a Shopify Expert?
Bottom Line
Custom fonts can transform your Shopify store’s branding—making it look unique, professional, and aligned with your identity. Whether you upload fonts manually, integrate Google Fonts, or use an app, the process is straightforward.
Pick a font that reflects your brand personality, apply it consistently, and give your customers a polished shopping experience.
Ready to take your branding beyond fonts? Work with our Shopify branding agency to craft a fully customized, high-converting storefront.
Frequently Asked Questions
Live Chat