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:

1. Go to Shopify Admin > Files > Upload Files.

2. Select and upload your font file.

3. 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:

1. In your Shopify admin, go Online Store > Edit code.

2. Navigate the Assets folder, click Add a new asset.

3. In the pop-up, click Create a blank file.

4. Select the Extension and name the file custom.

1. Click Done.

6. 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

1. 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:

1. Go to Themes > Edit Code, and open assets/custom.css

1. 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. 🚀