How to add custom fonts in Sleek? 🔥

A guide to add custom fonts to your store

https://youtu.be/HB57Suv4e0Ayoutu.be

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

5. Click Done.

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

A. Apply globally (quick method)

In custom.css, apply your font site-wide by targeting common elements:

body,
h1, h2, h3, h4, h5, h6,
p, span, div,
ul, ol, li,
a, button,
input, select, option,
label, legend, textarea, small {
  font-family: 'font-name', sans-serif;
}

Replace 'font-name' with the exact font name you registered (e.g. SofiaSans).

💡 Tip: Add or remove selectors as needed to fine-tune which elements use this font.

B. Apply with CSS variables (granular method)

If you’d like more control, for example, one font for headings and another for body text, use the CSS variables already built into the theme.

Open custom.css and add the variables you need:

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.

C. Target additional elements (optional)

Sometimes you want to target specific site areas or custom elements not covered by the defaults.

You can write extra CSS rules with their class names or IDs. Below are practical examples:

.custom-class {
  font-family: 'font-name', sans-serif;
}

.announcement-bar__message {
  font-family: 'font-name', sans-serif;
}

.footer-newsletter p,
.footer-newsletter input[type="email"] {
  font-family: 'font-name', sans-serif;
}

---

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