Only 3 Steps To Add Custom Font To Any Shopify Theme
Fonts are important in any eCom store letting people read your content is not an easy task.
On average, visitors read only an approximation of 30% of the words on the page. That’s why every word counts, and drawing users in is of utmost importance.
This is why we give it a big focus while designing our pages, picking the right font in the right place is the hardest part for my POV.
Unfortunately, Shopify doesn’t offer every single font that existed. This is why I will show you in this article how To Add Custom Font To Any Shopify theme in only 3 Steps.
#Step 1. Download The Font.
You can download fonts from the list below or any other place you want.
Google Fonts — Dafont — Adobe Fonts — Apple Fonts — Fontspace — 1001freefonts — …
NB: You must download the Webfont version of your font. The font files must include at least the WOFF and WOFF2 file types (TTF or OTF are not Webfont file types so they’re not supported by Shopify — in our case). You can use this website to convert every font to a Webfont version.
#Step 2. Upload Your Font To Shopify Theme.
Follow the below steps:
- From your Shopify dashboard, go to Online Store>Find Your Theme>Actions>Edit Code.
Or click here to edit the live theme. - On the sidebar, find the “Assets” folder and click on “Add a New Asset” then select the font you’ve downloaded on step 1, and click “Upload Asset”. I will Assume your filename is: `customFont.woff`
- Verify and make sure that the file is added to your “Assets” folder.
#Step 3. Add The font To The Shopify layout.
Now, after we did add our font to the theme, we will need to declare it so we can use it on our code. and this is super easy as I will show you below, let’s do it.
Your “Theme Editor” is still open, right? if not refer to Step2.1 to open it.
On the left sidebar of your theme editor, locate the “theme.liquid” file under the “Layout” folder.
I would suggest to put the declaration inside the <head> of one “ theme.liquid” file so it will get loaded first. We need to follow this format below to add our new font. you can refer to this documentation here from Shopify. Else, you can add it to your CSS base file — just make sure you declare it before calling it.
@font-face {
font-family: "EL_Font";
src: url({{"customFont.woff" | asset_url }}) format("woff");
}Finally, to use the new font just call it as the example below:
.Custom_font{
font-family: "EL_Font";
}
