Skip to content

Little Theme Shop

Creative Wordpress Themes, Editable Templates

  • Shop
  • Showcase
  • Hire Us
  • Support
  • Contact
  • Blog
  • Shop
  • Showcase
  • Hire Us
  • Support
  • Contact
  • Blog

How-To

How to Add Custom Fonts to a Shopify Theme

Out of the box, Shopify comes with a ton of font options that will meet most users needs. However, if you have your heart set on a specific font and need it added to your Shopify theme, here’s a quick step-by-step tutorial to show you how to do that.

Step 1: Download your font

Make sure you have a font file ready. Your font might be in TTF, OTF, WOFF, or WOFF2 format. Ideally, for the web, you should use a .woff or .woff2 format. You can convert your font using Font Squirrel’s webfont generator.

Step 2: Upload your font

Next, while in Shopify, go to Online Store > Themes > (three dots) > Edit Code. Scroll down to Assets and click “Add a new asset.” Upload your font file.

Step 3: Add CSS

Next, open Header.liquid from under Sections and copy and paste the below code inside the <style></style> brackets. Remember to replace “your-font-file” with the file name of your custom font and “My Custom Font” with the name of your font.

@font-face {
  font-family: 'My Custom Font';
  src: url('{{ 'custom-font.woff2' | asset_url}}') format('woff2'), url('{{ 'custom-font.woff' | asset_url}}') format('woff');
  font-weight: normal;
  font-style: normal;
}
/* To replace the titles only */

h1, h2, h3, h4, h5, h6 {
  font-family: 'My Custom Font', sans-serif !important;
}
/* To replace the body/paragraphs only */

p, li, span {
  font-family: 'My Custom Font', sans-serif !important;
}

Save when you’re done and exit the Code Editor. You should see your changes, but if you don’t, remember to clear your browser cache.

how toshopify tutorial

Related Posts

How to Add Custom Fields to a Shopify Theme
How to Translate a WordPress Theme
How to Add Custom Fonts to WordPress
How to Speed Up Your WordPress Site
  • Shop
  • Showcase
  • Hire Us
  • Support
  • Contact
  • Blog
Copyright © 2023 | All Rights Reserved | Designed by Little Theme Shop

Buy two or more items and get $10 off with the code LITTLEBUNDLE Dismiss