Add Shopify Custom Font for Dawn theme or Any Shopify theme

Add Shopify Custom Font for Dawn theme or Any Shopify theme

See Other Products

Custom font made easy with the tutorial below. Add your own custom font to Dawn theme or any of Shopify theme. 

This are the following font formats available today. 

TrueType (TTF): Developed by Microsoft and Apple and supported to some older browsers, especially on mobile.
Web Open Font Format (WOFF): A wrapper format for TrueType and OpenType fonts that compresses the files and is supported by all modern browsers.
Web Open Font Format 2 (WOFF2): Updated WOFF that was developed by Google. This is considered the BEST format for font since it offers smaller file sizes. Smaller file size means better performance for modern browsers.

You can download free fonts from the list below but make sure to check if the license if you are using it commercially. 

1. Google

2. Dafont

3. 1001freefonts

4. Fontspace

You can also combine custom fonts to your liking with instafonts.

 

1. Obtain your font file from whatever website you have as long as your file type is TFF. 

2. The file I have downloaded is tff so we have to change it to WOFF or WOFF2 file so Shopify theme can recognize the file. We need to unzip the file to be able to convert.

3. Then we use the free font converter CloudCovert to convert from file TFF to WOFF2. 

4. Go to Shopify Admin page, then Online store, Themes.

5. Choose the theme you want to edit, click Actions, then Edit code.

6. Open the Asset folder and click "Add a new asset." Then download the font file.

7.  I would suggest putting the font face declaration inside the <head> of the theme.liquid file under the layout Folder so it will get loaded first. We need to follow this format below to enter our font. Please refer to Shopify documentation here.  

You can set any name on the font-family. This name will be use in calling the font in the CSS. 

@font-face {
font-family: "My Font";
src: url({{"download-font.woff2" | asset_url }}) format("woff2");
}

 

8. All we need to do is to call this font to our theme texts. To call the font, we us the font-family name we provided. NOTE: Use !important in the end if you want to override previous font style. 

 .my-text {
font-family: "My font" !important;
}
Copied!
Back to blog

Leave a comment