Want to add your favorite font to Shopify?
This article will outline how to do just that!
We’ll also explore how to use a Google Font, how to select a Shopify font, and why fonts are essential.
This Article Contains
- How To Add Shopify Fonts To Your Store
- How To Add Google Fonts To Shopify
- How To Add A Custom Font To Your Shopify Store
- How Important Are Fonts In Shopify?
Let’s get started!
How To Add Shopify Fonts To Your Store
If you want to try a different font, Shopify hosts a diverse range of free, attractive fonts that include:
- System font: Monaco, Sans serif
- Selected Google Fonts: Playfair Display, Open sans
- Monotype font: Monotype Baskerville, Monotype Bodoni
The best part?
Switching between a Shopify font is easier than adding your custom font or a Google Font.
Whether you use a Shopify app or a website, you can easily add Shopify fonts through a theme editor.
Here’s how:
Step 1: Navigate to Themes
Go to the Online Store from the Shopify admin dashboard and choose Themes from the panel on the screen’s left side.
Step 2: Select Typography.
Go to Customize and navigate to Theme settings. Below Theme settings, you’ll find Typography on the left-hand side panel of the screen, where you can choose your favorite Shopify font.
Step 3: Change the font style.
To choose a new font, select Change under the existing font name to open up a drop-down menu.
You can then choose the new Shopify font from the drop-down menu.
Step 4: Click the Preview icon after you save your font.
The Preview icon lets you check if your Shopify font works properly.
But what do you do if the font you have in mind is a Google Font?
How To Add Google Fonts To Shopify
Although Shopify offers many fonts, they have a limited selection. So if you can’t find a suitable font, you can choose one from the Google Fonts site, like the Open Sans or Playfair Display font.
Once you’ve picked the perfect Google Font for your Shopify store, here’s what you need to do:
Step 1: Copy the font code
After selecting the Google font, click the Select the style button of the font.
You can then copy the font code from the pop-up window on the right side of the screen (under Use on the Web).
Step 2: Paste the code in the head tag of your Shopify theme
Navigate to Online Store > Themes > Actions > Edit Code via the Shopify admin dashboard.
Next, you’ll need to make changes to the head tag of your online store. A head tag contains the metadata, which includes information about the document title, character set, styles, font size, and other document details.
To find the head tag, select Layout on the left side of the window and choose theme.liquid.
Then, scroll down till you see the head tag, paste the font code inside the tag, and save your changes.
Step 3: Open the Shopify theme’s style files
Spot the Assets folder and open the two style files named “theme.scss.liquid” and “timber.scss.liquid”.
Step 4: Copy font CSS rules from Google Font
Copy the selected font name and CSS rules that specify the font family from the Google font site.
Step 5: Add the copied font details to the style files
Scroll down to find the Typography section in the style files and replace these code lines with the font family and name details you copied from Google Fonts:
If the copied font is ‘Rampart One’, cursive;”, then the new code lines will be:
$headerFontStack: ‘Rampart One’, cursive;
$bodyFontStack: ‘Rampart One’, cursive;
$accentFontStack: ‘Rampart One’, cursive;
If you’ve purchased a custom font or had one specially made for your business, you can also use that for your Shopify store.
Are you wondering how?
Well, we’ve got you covered!
How To Add A Custom Font To Your Shopify Store
You can add a new, different font, like Font Awesome, in your preferred font size and style using web font files without a complicated CSS code.
Here’s how you can do it:
1. Upload the Font
First, you need to download the web font version of your chosen font as a WOFF (web open font format) or WOFF2 file. You can either download it from third-party websites or font apps in the Shopify app store.
So what’s a web font?
A web font is basically a font file explicitly created for a website project.
Once you download your custom font file, head to your Shopify admin dashboard through the Shopify app or website to upload a custom font file to your theme.
Here’s how you can add a font to Shopify:
A. Click Edit Code
Navigate to the Online Store from your Shopify dashboard, and scroll down until you find Themes. Select Edit Code from the Actions dropdown next to the theme you want to edit.
B. Select Add a new asset
On the left sidebar, go to Assets and click Add a new asset. After you select your font file, select Upload file to finish the step.
2. Install A Font in Your Theme
Once you upload the font file, you need to program your theme to use the new font. For that, you must add the details of your new font to your theme file.
Here’s how:
A. Find your theme’s CSS file
In Shopify, a CSS file is usually named styles.scss.liquid, theme.scss.liquid, or a similar variation. You can find the file in your theme’s Assets folder of the theme code editor.
But what’s a CSS file?
Cascading Style Sheets (CSS) is a stylesheet language used to design layouts of themes and websites.
B. Add the new code
Scroll to the bottom of the CSS file and add the code given below by replacing the following elements:
- Font name: If the font’s name consists of more than one word, you must use quotation marks (“”).
- Filename: The name of the font file that was uploaded to your theme, including its file extension.
- Format: The uploaded font’s format.
Here’s a sample of what the CSS code will look like:
@font-face {
font-family: “Font name“;
src: url({{ “Filename” | asset_url }}) format(“Format“);
For example, if your selected font is Font Awesome in web open font format, then the code in the theme file should read:
@font-face {
font-family: “Font Awesome”, classic;
src: url({{“Font Awesome, classic.woff2” }}) format(“woff2”);
Next, let’s learn how to change the font of specific words and elements.
How To Add Custom Fonts To Specific Site Elements
You can also apply a custom font to specific elements like the title or heading of a product page, your Shopify store’s body text, product page image descriptions, etc.
What’s a CSS selector?
CSS selectors are used to select the individual HTML elements you want to style.
Here’s how you can change the font of independent elements:
Step 1: Open your browser’s developer tools
On Windows, press CTRL + Shift + C on the page whose elements you want to change. If you’re using a Mac, press CMD + Shift + C.
This opens your browser’s developer tools in inspection mode.
Step 2: Select the Copy selector
Find the element on the page that you want to change and click it. This will highlight the element’s HTML code in the inspection tool. Right-click the highlighted HTML.
Click Copy and select Copy selector. This copies the CSS selector for the element whose font you want to change.
Step 3: Find the Font menu
Navigate to Online Store > Themes > Actions > Edit Code through the Shopify dashboard.
On the right-hand corner, click on the three dots next to Edit code for Dawn theme (default Shopify theme) and select Customize theme.
In the sidebar that appears after you select Customize theme, click on Add font to access the Font dropdown menu.
Step 4: Paste the CSS selector
Now, all you have to do is paste the copied selector in the CSS selectors box located at the end of the Font dropdown menu.
Then, apply your favorite font to the selected text. You can also specify the font size when you add a custom font.
Note: Since this is a hard-coded solution (embedding data directly into the source code) for changing the font of single elements, it changes the page’s HTML. As a result, your Shopify store may stop working for some time.
If you’re still on the fence about tweaking your fonts and breathing new life into your Shopify store, here are a few reasons why you should go for it.
How Important Are Fonts in Shopify?
When done right, fonts can be a game changer for your site. Here’s why:
- Fonts build brand awareness: Using a unique font consistently can help build brand recognition. Viewers will instantly recognize your brand via your font. It can also invoke feelings of trust, aspiration, friendliness, and more in your store visitors, helping them connect with your brand.
- Fonts draw attention to important text: The perfect font combination can guide the audience through your store as you intend. For example, you can use big, bold fonts to draw attention to promotional items or sales announcements.
- Fonts enhance website aesthetics: At the very least, fonts level up your website’s appearance. An excellent visual aesthetic encourages visitors to stay longer.
Still have some questions on Shopify fonts?
3 FAQs About Shopify Font
Here are the answers to a few Shopify fonts-related FAQs:
1. What Are Some Key Things to Avoid While Selecting A Font?
When choosing a font for your Shopify store:
- Avoid using more than four different fonts for your store, as too many fonts can make your site look cluttered.
- Choose complimentary fonts. You want them to work together and not clash with each other. For example, adding a new heading font shouldn’t clash with your body text font.
- Avoid any font that compresses, stretches, skews, or manipulates the proportion of your store’s font combination.
2. Will The New Font Be Applied Across The Shopify Store?
Yes.
Typically, new fonts are applied across all Shopify store pages. However, if you only want to change a few particular elements, add fonts to these special elements individually.
3. Is It Safe To Download Custom Fonts From Third Party Providers?
To avoid downloading a corrupt font file, ensure you only download web font files from reputable, trustworthy third-party font providers, like Adobe Fonts and Monotype Fonts.
You can also download third-party font apps, like Fontify, from the Shopify app store.
But why stop at fonts?
If you feel your store could benefit from a makeover but fear it’s too much work — don’t worry.
All you need to do is invest in the perfect front-end-as-a-service provider like Pack!
Pack: The Easiest Way To Customize Your Shopify Store
Building an eCommerce storefront, customizing the platform, and scaling your business can be challenging for a do-it-yourself web project. That’s why you need Pack — a composable front-end solution.
Using Pack’s composable solution, you don’t have to rebuild your Shopify store’s front-end infrastructure from scratch. Instead, you can build a customized, headless Shopify PWA (using Nextjs) hassle-free.
And it doesn’t stop there!
Here are some other things Pack can do for your store:
- More admin control for content management, component reusability, and landing page building
- Scalable workflow and developer experience
- Open framework to integrate new and modern technologies
- Build complex features more efficiently with React!
- Complete control for custom design experiences
The flexible front-end solution also offers unique headless features, such as:
- Pre-integrated Shopify checkout, accounts, third parties, and more
- An easy-to-use theme editor to manage your content in real-time
- Product grouping for complex catalogs
- Product bundling for bundle management
- Documentation for knowledge sharing
Still not convinced?
Here’s an example of how Pack can change your business game:
Public Rec
Public Rec, a comfort-first leisure clothing business, scaled its brand on Shopify faster than it could handle. With a massive product catalog, a complicated front end, and a slow web platform, Public Rec found it challenging to manage its growth.
Pack solved these issues by building a Shopify PWA storefront to represent the brand better, organize its products effortlessly and improve site speed.
The result?
Public Rec showed tremendous growth, such as:
- 52% load speed improvement
- 26% increase in conversion
- 10% rise in average order value
Give Your Shopify Store A Facelift With Pack!
Adding eye-catching fonts to your Shopify store can help enhance your brand identity, focus on vital texts, and boost customer engagement.
But a better solution would be to completely revamp your scaling Shopify store by going headless.
This wouldn’t just give you cool fonts without using graphic design but results in a faster, more flexible, and highly responsive Shopify store that’ll demand your potential customer’s attention.
Ready for a Shopify makeover?
Contact Pack and start your customization journey for your growing Shopify store today!