How to add custom fonts in Sleek? 🔥
A guide to add custom fonts to your store

Sleek provides a wide library of system fonts to meet most design needs, but you can add custom fonts to personalize your theme further. Here’s how! ✨
1. Upload your custom font to Shopify
Ensure the font format is one of the following:
.ttf
,.otf
,.woff
, or.woff2
.Legal use: Ensure you have proper licenses for your custom fonts by working directly with font authors or distributors to ensure legal compliance.
Steps:
Go to Shopify Admin > Files > Upload Files.
Select and upload your font file.
Once uploaded, click the
button and copy the font's URL.


2. Create a customization file for your Sleek theme
To manage your customizations, you’ll need a dedicated CSS file. This makes updates easier and keeps everything organized.
Steps:
In your Shopify admin, go Online Store > Edit code.
Navigate the Assets folder, click Add a new asset.
In the pop-up, click Create a blank file.
Select the Extension and name the file
custom
Click Done.

After the new asset is created, go to the Layout folder and open the
theme.liquid
file.

7. Locate this line:
echo 'theme.css' | asset_url | stylesheet_tag: preload: true
Copy the line, paste it below, and update the file name to
custom.css
:
echo 'custom.css' | asset_url | stylesheet_tag: preload: true
9. Click Save.

3. Initialize the font in the CSS file
You’ll now define your custom font using @font-face
in the new custom.css
file.
Steps:
Go to Themes > Edit Code, and open
assets/custom.css
Add the following code:
@font-face{
font-family: Name of font ;
src : url( font-url );
}
For example:
@font-face{
font-family: SofiaSans;
src : url(https://cdn.shopify.com/s/files/1/0642/0565/2198/files/SofiaSans-Regular.ttf?v=167393855 );
}
Optional font styles:
Bold:
@font-face{
font-family: SofiaSans;
src : url(https://cdn.shopify.com/s/files/1/0642/0565/2198/files/SofiaSans-Regular.ttf?v=167393855 );
font-weight: bold;
}
Italic:
@font-face{
font-family: SofiaSans;
src : url(https://cdn.shopify.com/s/files/1/0642/0565/2198/files/SofiaSans-Regular.ttf?v=167393855 );
font-weight: bold;
font-style: italic;
}
4. Apply the font to the theme
Customize specific areas of your theme by updating CSS variables. Add these codes to your custom.css
file.
For body text:
:root
{
--font-body-family : font-name;
--font-body-style : font-style;
--font-body-weight : font-weight;
}
For example:
:root
{
--font-body-family : SofiaSans;
--font-body-style : italic;
--font-body-weight : bold;
}
For headings:
:root
{
--font-heading-family : font-name;
--font-heading-style : font-style;
--font-heading-weight : font-weight;
}
For example:
:root
{
--font-heading-family : SofiaSans
--font-heading-style : italic;
--font-heading-weight : bold;
}
For navigation:
:root
{
--font-navigation-family : font-name;
}
For example:
:root
{
--font-navigation-family : SofiaSans
}
For subheadings:
:root
{
--font-subheading-family : font-name;
}
For example:
:root
{
--font-subheading-family : SofiaSans
}
For product cards title:
:root
{
--font-pcard-title-family : font-name;
}
For example:
:root
{
--font-pcard-title-family : SofiaSans
}
For buttons:
:root
{
--font-button-family : font-name;
}
For example:
:root
{
--font-button-family : SofiaSans
}
Then, click Save and check the result.
Notes & Tips 📝
Font performance: Using too many fonts can slow down your site. Stick to 1-2 custom fonts for better performance.
Browser compatibility: Use formats like
.woff2
for modern browsers and.woff
for older ones.Test across devices: Ensure your fonts display correctly on different devices and browsers.
🎉 Congratulations! Your custom font is now ready to elevate your designs in Sleek. 🚀
Last updated
Was this helpful?