How to download google fonts and upload to shopify theme

Store Design
,
1

Can someone tell me step by step how to download google fonts to woff2 file (I only see tff) and after that

How to step by step upload to shopify.

Thank you in advance. I am using the up-to-date SENSE theme.

1 Like
2

Hello there @medusasmakeup check out this YouTube post to see the step by step process for adding a font to your Shopify theme in the most straightforward manner possible https://m.youtube.com/watch?v=Xugd6cCpQjY

3

Hello @medusasmakeup

Hey! I ran into this same thing a while back; Google Fonts usually only gives you .ttf files, but if you want .woff2 (which is better for the web and required for Shopify themes), here’s a super easy step-by-step guide that worked for me:

Step 1: Download the Font in .woff2 Format
Head over to https://gwfh.mranftl.com/fonts — this site is a total lifesaver!

Search for the font you want (like “Poppins” or “Roboto”).

Select the weights/styles you need.

Scroll down to the “Copy CSS” section; don’t lose this, we’ll use it later.

Hit the Download Files button. It gives you a ZIP file with .woff2 versions of the font.

Step 2: Upload the Font Files to Shopify
In your Shopify admin, go to Online Store > Themes.

Click the three dots on your current theme (Sense) and choose Edit code.

In the left sidebar, scroll to the “Assets” folder.

Click Add a new asset, then upload the .woff2 files from your ZIP.

Step 3: Add the Font to Your Theme CSS
Still in the code editor, open the file called base.css inside the Assets folder.

At the very top of the file, paste the font CSS from the “Copy CSS” section earlier, but tweak the src: to use Shopify’s file reference like this:

@font-face {
font-family: 'Poppins';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url('{{ "poppins-regular.woff2" | asset_url }}') format('woff2');
}

Just make sure the file name in the src: matches the one you uploaded.

Step 4: Apply the Font

Now that the font is loaded, scroll down a bit in base.css and set the font for your site like this:

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

Or target just specific elements like:

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

That’s it! Save your changes, refresh your store, and the new font should be live. If it doesn’t show up right away, try clearing your browser cache or checking in a private window.

4 
@font-face {
font-family: 'Poppins';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url('{{ "poppins-regular.woff2" | asset_url }}') format('woff2');
}

This would not work – .CSS assets do not process Liquid code.

Also, there were multiple cases when font files uploaded to assets ended up damaged.

Finally, editing theme code will make future updates difficult.