How to use Google Fonts locally on your theme?

Follow our guide to learn how to use Google Fonts locally in your theme. Discover the benefits and steps for enhancing your website's typography securely.

STEP 1: Download the font you want

Go to https://www.dafont.com, choose and download the font you want to use locally on your theme. You can also do the same from any other site that

STEP 2: Unzip the downloaded font

Go to your downloads folder and unzip the font file.

STEP 3: Convert your font

Go to the https://cloudconvert.com/ttf-to-woff2 and convert your font ttf file to woff2.

STEP 4: Go to your Shopify theme settings

Go to your Online Store settings, click on three dots and then select the Edit code option.

STEP 5: Add a new asset in your theme

Find Assets folder, click the Add a new asset option and choose the WOFF2 file downloaded earlier

STEP 6: Go to the assets again

Search in the Assets folder one of the following files: theme.css.liquid, base.css, default.css (it depends on your theme).

STEP 7: Add the new font

Scroll down to the end of the file, paste this code (don’t forget to replace the NAME OF FONT and the NAME-OF-FONT-FILE with the name of your selected font and the name of the file) and click Save.

@font-face {
   font-family: "NAME OF FONT";
   src: url("NAME-OF-FONT-FILE.woff2") format("woff2"),
   url("NAME-OF-FONT-FILE.woff") format("woff");
}

h1, h2, h3, h4, h5, h6, body, p, a {
   font-family: “NAME OF FONT”;
}

in this case, the code would be:

@font-face {
   font-family: "VintageKing" !important;
   src: url("VintageKing.woff2") format("woff2"),
   url("VintageKing.woff") format("woff");
}

h1, h2, h3, h4, h5, h6, body, p, a {
   font-family: “VintageKing” !important;
}

STEP 8: Check your store

Go to your store and check your new font!

Updated on: 19/12/2024