How to Add Google Fonts to Shopify

 Today we will learn how to add google fonts or custom fonts for Dawn theme on Shopify website.

Iam going to add Roboto google font to my shopify theme.

STEP 1

Go to https://fonts.google.com/ and search for Roboto and click select the font then click Download Family button on the top.

STEP 2

We need to convert the font to css @font-face formats. For this, I used https://transfonter.org. Click on Add fonts button and upload google font.

Select the following  WOFF, WOFF2 and click the Convert button and then click the Download button

STEP 3

Login to Shopify admin area > Content > Files and then upload your converted fonts.  I uploaded Roboto.woff and Roboto.woff2 and then copy link.

Link will be like this https://cdn.shopify.com/s/files/1/283/230/1901/files/roboto.eot?v=1702617248

STEP 4

Go to Shopify admin area > Online Store > themes > Edit code > Assets > Edit Base.css and add the following code

@font-face {

font-family: 'Roboto';

src: url('YOURLINK/roboto.woff?v=1702617247') format('woff2'),

url('YOURLINK/roboto.woff2?v=1702617246') format('woff');

font-weight: normal;

font-style: normal;

font-display: swap;

}

Now you use the custom fonts in your site elements by specifying the font-family property in your CSS like below.

font-family: 'Roboto';