Blogs

How to add a custom font to Shopify?

Having the best branding on your website is key to gaining trust from your customers. Sometimes that can be as easy as picking a really nice font for all your headings. This is a simple and in most cases free way to make a big impact to your design. Shopify themes have the ability to install custom fonts. You can license fonts for free in many cases and spice up your design instantly. Learn how to upload, and apply a custom font to your Shopify store below.

Step 1: Log in to the Shopify store admin and go to Online Store > Themes > and next to your theme, select "Actions" > Edit Code.

Shopify how to edit theme code

Step 2: The best way to install your font is to use a WOFF format. However, you can use many web formats. On the left navigation go into the "Assets" and click "Add a new asset". Select your font file and click the "Upload asset" button.

how to upload asset to shopify theme

Step 3: The next step is to find the global CSS file. Each theme is different but its not hard to identify which file has the "css" in the name. Go to the Assets area and look for something similar to "theme.scss.liquid".

how to edit css file in shopify theme

Step 4: At the very bottom of the css file you will paste in the following code. Replace the name of the font file that you uploaded to the assets area in Step 2 above where you see "Font-File-Name".

 @font-face {
        font-family: 'Font-File-Name';
        src: url('Font-File-Name.woff') format('woff'),
        font-weight: normal;
        font-style: normal; }

h1, h1 a, h2, h2 a, h3, h3 a, h4, h4 a, h5, h5 a, h6, h6 a, #nav li a, div.title a, .headline, .subtitle { font-family: 'FontName' !important; }
add custom font code to css file in shopify

Step 5: Click Save. This will auto add your new font to the headings in the code. If you want to modify the headings this font applies to then remove any headings you don't want it to apply to.

Note: The font option will not show in your themes typography settings. The font must be controlled from the themes code if you want to modify it moving forward.

If you have any questions or need help with this then reach out to us today!

Common Questions and Answers

Q: How do I add a custom font to my Shopify store?

A: First, choose and download a font. Upload the font files to the Assets folder in your Shopify admin. Then, add a @font-face declaration in your CSS file and apply the font to specific elements.

Q: What file formats are recommended for custom fonts on Shopify?

A: The recommended formats are .woff and .woff2 because they are optimized for web use and widely supported across browsers.

Q: Can I use multiple custom fonts on my Shopify store?

A: Yes, you can use multiple custom fonts by adding multiple @font-face declarations in your CSS file and applying them to different elements as needed.

Q: How do I ensure my custom fonts load quickly?

A: To ensure fast loading, optimize your font files for the web, use the correct file formats (.woff, .woff2), and implement font-display CSS property for better performance.

Q: What should I do if my custom font is not displaying correctly?

A: Check your CSS code for any errors, ensure the font files are correctly uploaded to the Assets folder, and verify the paths in the @font-face declaration. Clear your browser cache and refresh the page to see if the issue is resolved.

Handcrafted Migrations

Our service is a bit different than other automated systems. Our handcrafted migration solutions are designed to be handled with care, for well established companies, and to retain existing search engine rank (SEO).

Take Your Business To The Next Level

All Clients Receive Support 7-Days A Week
Ongoing Support
Project Management Portal
Scheduled Phone Calls
Quick Turnaround for Requests
Free Link QA Crawling
Strategic Site Launches
Contact Us

No-More Gimmicky Services

We get you totally setup, on track, and in a position to manage your own business.

No-More *Gimmicky* Services

We get you totally setup, on track, and in a position to manage your own business.

No-More Gimmicky Services

We get you totally setup, on track, and in a position to manage your own business.
This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.
arrow-leftarrow-rightcheckmark-circle linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram