How to Add Custom Typography (Google Fonts or Self-Hosted Fonts) to Your Shopify Theme

How to Add Custom Typography (Google Fonts or Self-Hosted Fonts) to Your Shopify Theme

Want to use a unique font in your Shopify store instead of the built-in theme fonts? Maybe Google Fonts, Adobe Fonts, or even your own downloaded font file?

This step-by-step tutorial will show you how to add custom typography to any Shopify theme — even if you have no coding experience.

✨ What You Will Learn

  • How to add Google Fonts to Shopify
  • How to upload & use self-hosted fonts (TTF, WOFF, WOFF2)
  • How to apply your custom fonts to headings, body text, buttons, etc.

🅰️ Method 1 — Adding Google Fonts to Shopify (Easiest!)

Google Fonts works on Shopify without apps. Here's how to add them.

Step 1 — Choose a Font on Google Fonts

Visit fonts.google.com and choose the font you like.

Click the font and look for the "Embed" → code.

Example embed code:

Step 2 — Add the Font to theme.liquid

Go to:

Online Store → Themes → Edit Code

Open layout/theme.liquid

Paste the Google Fonts link just before .

Step 3 — Apply the Font in CSS

Open your theme stylesheet:

  • assets/base.css OR
  • assets/theme.css

Paste:

body {
  font-family: 'Poppins', sans-serif;
}

For headings:

h1, h2, h3, h4 {
  font-family: 'Poppins', sans-serif;
}

🅱️ Method 2 — Add Self-Hosted Custom Fonts (Uploaded Files)

If you purchased a font or downloaded a custom TTF/OTF/WOFF file, this method lets you load it directly from Shopify.

Step 1 — Upload Your Font Files

Go to:

Online Store → Themes → Edit Code → assets → Add a new asset

Upload your font files:

  • .woff (recommended)
  • .woff2 (recommended)
  • .ttf (OK)

Example filenames:

  • Poppins-Regular.woff2
  • Poppins-Bold.woff2

Step 2 — Register the Fonts in CSS

Open:

assets/theme.css or assets/base.css

Paste the @font-face rule:

@font-face {
  font-family: 'MyCustomFont';
  src: url('{{ "Poppins-Regular.woff2" | asset_url }}') format('woff2'),
       url('{{ "Poppins-Regular.woff" | asset_url }}') format('woff');
  font-weight: 400;
  font-style: normal;
}

For the bold version:

@font-face {
  font-family: 'MyCustomFont';
  src: url('{{ "Poppins-Bold.woff2" | asset_url }}') format('woff2'),
       url('{{ "Poppins-Bold.woff" | asset_url }}') format('woff');
  font-weight: 700;
  font-style: normal;
}

Step 3 — Apply Your Custom Font

Still in your CSS file, apply the font globally:

body {
  font-family: 'MyCustomFont', sans-serif;
}

Optional: Apply to Headings Only

h1, h2, h3 {
  font-family: 'MyCustomFont', serif;
}

🧪 Step 4 — Test Your Font

Make sure to test your site on:

  • Desktop
  • Mobile
  • Incognito mode (to avoid cached fonts)

If the font didn’t update, try refreshing the page with:

CTRL + SHIFT + R (Windows) CMD + SHIFT + R (Mac)

⚠️ Troubleshooting Tips

  • If font doesn’t load → check spelling of file name
  • If bold weights don’t work → add separate @font-face for each weight
  • If Google Fonts don’t apply → ensure link tag is inside
  • If mobile shows wrong font → clear cache or disable old font apps

🎉 You’re Done!

Your Shopify theme now uses beautiful custom typography — Google Fonts or your own uploaded files.

This helps your store stand out and match your brand identity perfectly.

🚀 Want another tutorial?

I can write another HTML article for any Shopify design or Liquid topic. Just tell me the next title from your list!

Back to blog

Leave a comment