How to add custom fonts in Sleek? 🔥

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

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

echo 'theme.css' | asset_url | stylesheet_tag: preload: true

echo 'custom.css' | asset_url | stylesheet_tag: preload: true

#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

2. 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).

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