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.

Steps

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: 29/07/2024