> For the complete documentation index, see [llms.txt](https://help.fluorescent.co/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://help.fluorescent.co/ira/for-developers/custom-fonts.md).

# Custom fonts

{% hint style="danger" %} <mark style="color:red;">Theme retirement</mark> Ira is no longer available on the Shopify theme store. **Theme support and updates for current users will end after May 18, 2024**. [Learn more here](https://github.com/fluorescent/kb-ira/blob/main/for-developers/readme/theme-retirement.md).
{% endhint %}

{% hint style="warning" %}
**We do not support code customizations**. This guide offers a basic reference for advanced users familiar with HTML and CSS. Always test code changes on a duplicated, unpublished version of your theme. For assistance, we recommend finding a professional developer through [Shopify Experts ↗](https://experts.shopify.com/) or [Task Husky ↗](https://account.taskhusky.com/aff.php?aff=153\&page=fluorescent).
{% endhint %}

With Custom CSS, it's possible to add custom fonts with a few edits to your theme code. Custom fonts are uploaded to **Shopify Files** and then applied manually to different text elements in the **Code editor**.

Before deciding to use a custom font, we highly recommend considering one of the hundreds of fonts in [Shopify's Font Picker](https://shopify.dev/themes/architecture/settings/fonts#third-party-hosted-fonts) as your first choice, since they are fully supported by all our themes.

Custom fonts will not appear as an option in the Theme Editor's font selector.

## Watch video tutorial

{% embed url="<https://www.youtube.com/embed/Hx84kfPuw1s>" %}

## **Upload fonts to Shopify Files**

All font files should be in **`WOFF`** and **`WOFF2`** formats. While **`TTF`** and **`OTF`** can be used, they are not web-supported fonts and may cause issues. You can convert font formats with free tools like [CloudConvert](https://cloudconvert.com/).

Using custom fonts may contribute to longer load-times. See our [Online store speed guide](/ira/general/editing-themes/online-store-speed.md) to learn about balancing features and customizations with load times.

<details>

<summary><mark style="color:blue;"><strong>STEPS</strong></mark></summary>

In your **Shopify Admin**:

1. Go to **Content > Files** and click **Upload files** to add your **`WOFF`** and **`WOFF2`** files.

   ![](/files/mF25o52gXAWng63f4ojp)
2. Keep this window open for the next step.

</details>

## Add fonts with Custom CSS in theme editor

After uploading your font files, you can import them in your Theme settings using the **Custom CSS** field.

<details>

<summary><mark style="color:blue;"><strong>STEPS</strong></mark></summary>

In your **Shopify Admin**:

1. Click **Duplicate** on your current theme.
2. Click **Customize** on the duplicated, unpublished theme version.

In your theme editor (**Customize**):

1. Go to **Theme settings > Advanced**.
2. Click to open the **Custom CSS** tab.
3. Copy and paste the following code on a new line:

   ```css
   @font-face {
     font-family: "FONT NAME";
     src: url("FONT URL") format("woff"),
     url("FONT URL") format("woff2");
   }
   ```
4. Replace **`FONT NAME`** with the exact name of your font. **Example**:

   ```css
   @font-face {
     font-family: "Custom Font Name";
     src: url("FONT URL") format("woff"),
     url("FONT URL") format("woff2");
   }
   ```
5. In your **Shopify files**, click the link icon to copy the URL and replace **`FONT URL`** for both the **`WOFF`** and **`WOFF2`** formats. **Example**:

   ![](/files/dPaX5Z40YUU8Q9OZShZ4)

   ```css
   @font-face {
     font-family: "Custom Font Name";
     src: url("https://cdn.shopify.com/s/files/1/0518/6692/7292/files/DMSans-Regular.woff?v=1663348292") format("woff"),
     url("https://cdn.shopify.com/s/files/1/0518/6692/7292/files/DMSans-Regular.woff2?v=1663348302") format("woff2");
   }

   ```
6. Click **Save**.
7. Enter or paste the CSS code into the **Custom styles** box.
8. Click **Save**.
9. Click **Preview** to review your changes.

   > Use the preview link to further test your changes on multiple browsers and devices.
10. After testing, you can go to your Theme library to **Publish** the duplicated theme with your changes.

</details>

## **Apply fonts to theme text**

Once you've added your font, you can apply it manually to elements of your theme with the CSS code below.

### **Logo, Headings, and Body text**

Ira groups theme text into 3 categories: **Logo**, **Headings**, and **Body**. Use the code below to override the font settings in your theme editor.

**Note** | You can continue to use the **Size**, **Capitalize**, and **Letter spacing** font settings in the theme editor to apply to your custom font.

<details>

<summary><mark style="color:blue;"><strong>STEPS</strong></mark></summary>

In your theme editor (**Customize**):

1. Copy and paste the code below on a new line in the **Custom CSS** field of your theme settings.

   ```css
   :root {
   /*
     --font-logo: unset;
     --font-logo-weight: unset;
     --font-logo-style: unset;
     */
   /*
     --font-heading: unset;
     --font-heading-weight: unset;
     --font-heading-style: unset;
     */
   /*
     --font-body: unset;
     --font-body-weight: unset;
     --font-body-style: unset;
     */
   }
   ```

   > **--font-logo** applies to the site title (when no logo image is used).

   > **--font-heading** applies to headings and subheadings for pages and sections.

   > **--font-body** applies to paragraph, navigation, product listing, and button text.
2. For each font you want to change, replace **`unset`** with the custom font name and delete the comment tags (**`/*`** and **`/`** on either side) . **Example**:

   ```css
   :root {
   --font-logo: Custom Font Name;
   --font-logo-weight: unset;
   --font-style: unset;
   }
   ```
3. (*Optional*.) If your font has multiple weights or styles, replace **`unset`** with the values for those properties. **Example**:

   ```css
   :root {
     --font-logo: Custom Font Name;
     --font-logo-weight: 400;
     --font-style: italic;
   }
   ```
4. Click **Save**.

   > Click **Preview Store** to test and troubleshoot your code before publishing the theme.

</details>

### **Apply fonts to specific elements**

> **Note |** If your require assistance, we recommend contacting [Shopify Experts ↗](https://experts.shopify.com/) or [Task Husky ↗](https://account.taskhusky.com/aff.php?aff=153\&page=fluorescent).

Applying fonts to specific elements requires knowing how to use your browser's [Inspector tool ↗](https://developer.mozilla.org/en-US/docs/Learn/Common_questions/What_are_browser_developer_tools) and familiarity with [CSS selectors ↗](https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Selectors).

If that sounds like you, you can find and copy the CSS selector with the Inspector tool, then edit and use the following example below:

```css
CSS-selector-name {
  font-family: "Custom Font Name" !important;
}
```

## Add fonts with custom.css file

While we recommend using the available Custom CSS settings in the theme editor, Ira includes a `custom.css` file in the **Styles** folder.

{% hint style="warning" %}
Always duplicate your current theme before making edits to the code. Use the unpublished version to add and test customizations before publishing your theme.
{% endhint %}

<br>

***

> **Related links**
>
> [Edit theme JavaScript](/ira/general/editing-themes.md)\
> [Custom JavaScript events](/ira/for-developers/custom-javascript-events.md)\
> [Custom Liquid](/ira/for-developers/custom-liquid.md)\
> [Custom CSS](/ira/for-developers/custom-css.md)\
> [Custom fonts](/ira/for-developers/custom-fonts.md)