Easily add a custom font to your Shopify store's Dawn theme or any other theme using the step-by-step tutorial provided below. Choose from popular font formats such as TrueType, Web Open Font Format (WOFF), and Web Open Font Format 2 (WOFF2) to ensure compatibility with modern browsers. Check out free font resources like Google, Dafont, 1001freefonts, and Fontspace, but remember to verify commercial license usage. You can also create custom font combinations with instafonts. Start enhancing your store's design with unique typography today.
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
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.
You can set any name on the font-family. This name will be use in calling the font in the CSS.
If you are using several font types, separate the url with a comma. Refer to the code below
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.
OTHER SOLUTION:
If for some reason you the above solution does not work. It could be that the font file is not linking properly. Try following the instructions below.
1. In your Admin store, click Settings on your left hand bottom corner
2. Go to Files, then upload your font.
3. Copy the link when done uploading, and paste it in the font-face. See code below for reference
Note: Replace the https://samplelink.com link with the Shopify file link.
If you are still unable to link your font properly, you can hire us to do it for you. We can also fix the issue of Shopify fonts broken link or dead link when it come to fonts. Just contact us using "Chat with us."