# How to add custom fonts in Sleek? 🔥

{% embed url="<https://youtu.be/HB57Suv4e0A>" %}

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

{% hint style="warning" %}

* 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.
  {% endhint %}

{% hint style="success" %}
**Steps:**&#x20;

1. Go to **Shopify Admin > Files > Upload Files**.
2. Select and upload your font file.
3. Once uploaded, click the <img src="https://1836495117-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FOdebKCa6IK9qfbdvSKj0%2Fuploads%2FZbV4Iin7VA42qh2saCAh%2FLinkMinor.svg?alt=media&#x26;token=268b3bdd-b522-4d67-8933-7c67cee762ee" alt="" data-size="line"> button and copy the font's URL.
   {% endhint %}

<figure><img src="https://3064615700-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3yE7VVjvl0MgK6awOPKB%2Fuploads%2FxzX2kZupmBKB1baGwMxK%2Fimage.png?alt=media&#x26;token=811e7367-4000-49e3-af69-704abff1a3a9" alt=""><figcaption></figcaption></figure>

<figure><img src="https://3064615700-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3yE7VVjvl0MgK6awOPKB%2Fuploads%2FgqmGfujNkOAHKOHn2PNx%2Fimage.png?alt=media&#x26;token=c0d12f06-e930-4ed6-9b46-f4a8dca0a157" alt=""><figcaption></figcaption></figure>

## 2. Create a customization file for your Sleek theme <a href="#create-a-customization-file" id="create-a-customization-file"></a>

To manage your customizations, you’ll need a dedicated CSS file. This makes updates easier and keeps everything organized.

{% hint style="success" %}
**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**.
   {% endhint %}

<figure><img src="https://3064615700-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3yE7VVjvl0MgK6awOPKB%2Fuploads%2FmvAA1ASQWNXBc2MuCIYw%2Fimage.png?alt=media&#x26;token=54846a76-5d78-4a6c-8536-2e043d6ee7ea" alt=""><figcaption></figcaption></figure>

{% hint style="success" %}
6\. After the new asset is created, go to the **Layout** folder and open the `theme.liquid` file.
{% endhint %}

<figure><img src="https://3064615700-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3yE7VVjvl0MgK6awOPKB%2Fuploads%2F4EvFMXgSgNzDNTVE9kBa%2Fimage.png?alt=media&#x26;token=1c7d835e-4471-45db-8d37-8a8d546fcbb7" alt=""><figcaption></figcaption></figure>

{% hint style="success" %}
7\. Locate this line:

<pre class="language-liquid"><code class="lang-liquid"><strong>echo 'theme.css' | asset_url | stylesheet_tag: preload: true
</strong></code></pre>

8. Copy the line, paste it below, and update the file name to `custom.css`:

<pre class="language-liquid"><code class="lang-liquid"><strong>echo 'custom.css' | asset_url | stylesheet_tag: preload: true
</strong></code></pre>

9\. Click **Save**.
{% endhint %}

<figure><img src="https://3064615700-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3yE7VVjvl0MgK6awOPKB%2Fuploads%2FSftLQcyouUFwMKWNyQS5%2FVideo2024-12-2315.59.55-ezgif.com-video-to-gif-converter%20(1).gif?alt=media&#x26;token=0090b21d-6666-4ff3-acf6-813861d45dd2" alt=""><figcaption></figcaption></figure>

## 3. Initialize the font in the CSS file

You’ll now define your custom font using `@font-face` in the new `custom.css` file.

{% hint style="success" %}
**Steps:**

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

<img src="https://3064615700-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3yE7VVjvl0MgK6awOPKB%2Fuploads%2FjfrVC0FbfMNYtcw1REWS%2Fimage.png?alt=media&#x26;token=105b79d8-b36d-48c6-9c53-560d7d8d469b" alt="" data-size="original">

2. Add the following code:

<pre><code><strong>@font-face{
</strong>  font-family: Name of font ;
  src : url( font-url );
}
</code></pre>

{% endhint %}

*For example:*

```css
@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:

```css
@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:

```css
@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:

```css
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`).&#x20;

{% hint style="success" %}
💡 **Tip:** Add or remove selectors as needed to fine-tune which elements use this font.
{% endhint %}

### 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:**

<pre class="language-css"><code class="lang-css"><strong>:root
</strong>{
--font-body-family : font-name;
--font-body-style : font-style;
--font-body-weight : font-weight;
}
</code></pre>

*For example:*

```css
:root
{
--font-body-family : SofiaSans;
--font-body-style : italic;
--font-body-weight : bold;
}
```

#### **For headings:**

<pre class="language-css"><code class="lang-css"><strong>:root
</strong>{
--font-heading-family : font-name;
--font-heading-style : font-style;
--font-heading-weight : font-weight;
}
</code></pre>

*For example:*

```css
:root
{
--font-heading-family : SofiaSans
--font-heading-style : italic;
--font-heading-weight : bold;
}
```

#### **For navigation:**

<pre class="language-css"><code class="lang-css"><strong>:root
</strong>{
--font-navigation-family : font-name;
}
</code></pre>

*For example:*

```css
:root
{
--font-navigation-family : SofiaSans
}
```

#### **For subheadings:**

<pre class="language-css"><code class="lang-css"><strong>:root
</strong>{
--font-subheading-family : font-name;
}
</code></pre>

*For example:*

```css
:root
{
--font-subheading-family : SofiaSans
}
```

#### **For product cards title:**

<pre class="language-css"><code class="lang-css"><strong>:root
</strong>{
--font-pcard-title-family : font-name;
}
</code></pre>

*For example:*

```css
:root
{
--font-pcard-title-family : SofiaSans
}
```

#### **For buttons:**

<pre class="language-css"><code class="lang-css"><strong>:root
</strong>{
--font-button-family : font-name;
}
</code></pre>

*For example:*

```css
: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.&#x20;

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

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