All Collections
Theme
Theme Settings
How to Add Custom Font to the Debutify Theme?
How to Add Custom Font to the Debutify Theme?

A guide on how to add custom font to the Debutify Shopify Theme.

Marang Marekimane avatar
Written by Marang Marekimane
Updated over a week ago

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

Click on the link icon to copy the file link.


How to Use the Custom Font

STEP 1

From the Shopify admin, under Online Store and click on Themes.

STEP 2

Click on the Ellipsis (Actions).

STEP 3

Click on Edit Code.

STEP 4

Search and open the file "theme.scss.liquid".

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; }

This code will change all paragraphs to your uploaded font.

Did this answer your question?