How To Add A Font To A Shopify Theme [2024]
Shopify - 3 Day Free Trial - No cc Needed   Free Trial
Detect Shopify Theme

Or go to our Shopify Theme Detector directly

How To Add A Font To A Shopify Theme

Last modified: November 7, 2023

How To Add A Font To A Shopify Theme
Free Shopify Trial

One of the top questions shop owners have when they’re developing a Shopify store is whether they can add a new font to the store. While Shopify has lots of great fonts through their Shopify Font Picker, there are still going to be times when the theme/Shopify doesn’t have the right font for your store.

For this, you need to add the font to your Shopify theme files. Here is a list of steps that you must take in order to add a custom font to your Shopify store.

Key Takeaways
Open your Shopify admin panel and navigate to the ‘Themes’ section.
Choose the theme you want to edit and click on ‘Actions’ then ‘Edit code’.
In the ‘Assets’ directory, click ‘Add a new asset’ to upload your font files.


Recommended: 10 Best Shopify Store Design Apps – [2024]
# Name Image
PageFly Advanced Page Builder
PageFly Advanced Page Builder
Shogun Landing Page Builder
Shogun Landing Page Builder
GemPage Powerful Page Builder
GemPage Powerful Page Builder
LayoutHub Easy Page Builder
LayoutHub Easy Page Builder
Slider Revolution
Slider Revolution
Product Filter & Search
Product Filter & Search
Drobile ‑ Mobile App Designer
Drobile ‑ Mobile App Designer
Free Shipping Progress Bar
Free Shipping Progress Bar
Sales Pop Master ‑ Countdown
Sales Pop Master ‑ Countdown
Announcement Bar & Header Bar
Announcement Bar & Header Bar
Show More

Step 1 – Purchase Your Webfont Version

The thing that you will need to do is to purchase the webfont version of the font that you want to use. The font files must include both WOFF and WOFF2 file types.

Step 2 – Log In

Now you need to log into your Shopify store with your user credentials.

Step 3 – Themes

From the Shopify Admin page, you need to select the ‘Online Store’ option then the ‘Themes’ option. Then you must find the theme that you want to edit and click on the ‘Actions’ and then ‘Edit Code’ option.

Within the side bar, you should see the option ‘Assets’ click on this and then find the stylesheet.css.liquid file. You need to open this for editing.

Step 4 - Add Code

Scroll down to the bottom of the stylesheet.css.liquid file and then paste in the follow code:

@font-face {
  font-family: “FONT NAME";
  src: url("FONT_NAME_FILE.woff2") format("woff2"),
       url("FONT_NAME_FILE .woff") format("woff");

You need to ensure that you replace the FONT NAME and FONT_NAME_FILE with the correct names used for your font that you want. Be sure to use the exact name, this is very case sensitive and you should ensure all the right hyphens are used.

You should also insert the following code to the file:

your css selector here { font-family: "NAME OF FONT" !important; }

Step 5 - Assets Folder

Now go to the ‘Assets’ folder and click on the option to ‘Add A New Asset’. You should upload the font files one at a time.

Step 6 – Using Your New Font

As soon as the new font has been installed, you need to select the headings/text that will use the font. For this you will need to open up a new browser tab and load up your website’s front end. As soon as this is done, find the heading/text that you want to have in the new font and the highlight the words and select the ‘Inspect’ option to see the coding for this text.

In the popup or the screen that displays the coding, look at the right hand column for the CSS code. You need to find the CSS property selector for the text/heading, for instance, it could be .section-title.lines h2. Copy the property name.

Then you go back to your theme code editor and re-open the stylesheet.css.liquid file. Find the part of the code that you added earlier that read:

your css selector here { font-family: "NAME OF FONT" !important; }

And replace the your css selector here with the property name you copied before. Once done, save the changes and fresh the website.

Keep Reading

Enhancing Your Shopify Theme with Custom Fonts

Understanding Shopify’s Font Library

Shopify’s font library offers a wide array of fonts, including system and custom options.

System fonts, available by default on most devices, ensure quick load times and consistent text rendering.

Custom fonts, sourced from third-party providers, can set your brand apart but require careful implementation to maintain site performance.

Integrating Google Fonts

Google Fonts can be easily integrated into your Shopify theme.

Simply select your desired font on Google Fonts, copy the provided code, and paste it into your theme’s head tag.

Adjust your CSS files to apply the new font family to your desired text elements.

Optimizing Font Performance

Font Selection Best Practices

When selecting fonts, aim for simplicity and readability. Avoid combining too many font styles, which can distract and confuse visitors.

Ensure that the font size and spacing are optimized for legibility across devices.

Changing Fonts in Shopify

Shopify’s interface makes it easy to change fonts within your theme settings.

Explore the Typography section to find a selection of fonts that can be previewed and applied instantly, ensuring a fresh look with minimal effort.

Considerations for Adding Fonts to Your Shopify Theme

Compatibility Across Browsers and Devices

Ensure the chosen font is displayed consistently on various browsers and devices to maintain a professional appearance.

Test extensively to avoid any rendering issues that could affect user experience.

Impact on Page Load Speed

Custom fonts can slow down your site, so it’s crucial to balance aesthetic appeal with performance.

Optimize font files and consider using modern formats like WOFF2 for faster loading times.

Legibility and User Experience

Fonts should enhance readability and not detract from it. Select fonts that are easy to read on all screen sizes and complement the overall design of your Shopify store.

Brand Consistency

Choose fonts that align with your brand’s voice and messaging. Consistent use of typography across all platforms reinforces brand recognition and trust with your audience.

Licensing and Legal Considerations

Verify the licensing of any custom fonts to avoid copyright infringement. Use licensed fonts or free fonts with commercial rights to ensure legal compliance.

Accessibility for All Users

Consider accessibility by ensuring fonts are clear and distinguishable for users with visual impairments.

Adhering to accessibility standards is not only inclusive but also expands your potential customer base.

Conclusion: How To Add A Font To A Shopify Theme

When your website’s theme changes, it will result in the changes you’ve made being undone. Be sure that you change back again using the system above. If this is a struggle for you, and you have revenues of more than $300,000, then it might be best to move to Shopify Plus, as these technical details can be sorted for you.

You can read more about Shopify Plus here.

  • How can I change the font on my Shopify theme without coding?

    Some Shopify themes offer font selections in the theme settings, allowing you to change fonts without editing the code. For themes without this option, you may need to modify the code or use a font app.

  • Can I use any font on my Shopify theme?

    You can use any font on your Shopify theme, provided it’s compatible with web use and you have the legal right to use it. Always check the font’s licensing to ensure you’re compliant with its usage terms.

  • Is it possible to use multiple custom fonts on my Shopify site?

    While it’s possible to use multiple custom fonts, it’s best to limit the number to avoid overwhelming users and to maintain site performance. A good rule of thumb is to use a primary font for headings and a secondary font for body text to keep your site visually organized.

Got Something To Say?

Your email address will not be published. Required fields are marked *