Or go to our Shopify Theme Detector directly
How To Add A Font To A Shopify Theme
Last modified: November 7, 2023
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.
| # | Name | Image | |
|---|---|---|---|
|
Get a Free Custom Shopify Store | ||
| 1 |
|
PageFly Advanced Page Builder
|
|
| 2 |
|
Shogun Landing Page Builder
|
|
| 3 |
|
GemPage Powerful Page Builder
|
|
| 4 |
|
LayoutHub Easy Page Builder
|
|
| 5 |
|
Slider Revolution
|
|
| 6 |
|
Product Filter & Search
|
|
| 7 |
|
Drobile ‑ Mobile App Designer
|
|
| 8 |
|
Free Shipping Progress Bar
|
|
| 9 |
|
Sales Pop Master ‑ Countdown
|
|
| 10 |
|
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.
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.
PageFly Landing Page Builder 
Shopify 
SEMrush 
Website Maintenance 
UpPromote