Adding custom fonts allows you to stand out and create a unique brand identity. This can enhance the user experience, boosting the likelihood of conversions.
The right typography enhances readability, keeping visitors engaged and immersed in your message - leaving a lasting impression on your audience and elevating your online presence.
To add a custom font, you must first upload the font file and then direct the site to use the file.
How to Upload a Font File
STEP 1
From the Shopify admin, click on Content.
STEP 2
Click on Files.
STEP 3
Click on Upload Files and select the font file.
STEP 4
Upload the Font File.
Once uploaded, click on the link icon to copy the link to the font file.
How to Use the Custom Font
STEP 1
From the Shopify admin, under Online Store, click on Themes.
STEP 2
Click on the Ellipsis (Actions).
STEP 3
Click on Edit Code.
STEP 4
Find and open the file named 'theme.css' or 'theme.scss,' depending on your theme version.
STEP 5
Add the code below, replacing highlighted elements of the code with actual data.
@font-face {
font-family: "FONTNAME";
src: url("ADDLINKHERE"} format ("woff"),
url ("ADDLINKHERE") format ("woff2");
}
Once the font has been configured correctly, you change the CSS styles to change specific parts of your store to the font, for example.
p{
font-family:FONTNAME;
}
STEP 6
Click Save to apply the changes. This code will change all paragraphs to your uploaded font.
