# Custom fonts
{% 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 unpublished theme copies. For assistance, we recommend reaching out to a [verified Fluorescent partner](https://partners.fluorescent.co/).
{% 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**. (Custom fonts will not appear as an option in the Theme Editor's font selector.)
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.
## **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 article about balancing features and customizations with your [online store speed](https://help.fluorescent.co/eclipse/general/online-store-speed).
STEPS
In your **Shopify Admin**:
1. Go to **Content > Files** and click **Upload files** to add your **`WOFF`** and **`WOFF2`** files.
2. Keep this window open for the next step.
## 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.
STEPS
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**:
```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.
## **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.
Eclipse groups theme text into 4 categories:
* **Headings** (includes logo text)
* **Body**
* **Navigation**
* **Buttons**.
Use the code in the steps below to override the font settings in your theme editor.
STEPS
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-family-heading: unset;
--font-weight-heading: unset;
--font-style-heading: unset;
*/
/*
--font-family-body: unset;
--font-weight-body: unset;
--font-style-body: unset;
*/
/*
--font-family-navigation: unset;
--font-weight-navigation: unset;
--font-style-navigation: unset;
*/
/*
--font-family-button: unset;
--font-weight-button: unset;
--font-style-button: unset;
*/
}
```
> **--font-heading** applies to the store name, headings, and subheadings for pages and sections.
> **--font-body** applies to lines of text and product listings.
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-family-heading: Custom Font Name;
---font-weight-heading: unset;
--font-style-heading: unset;
}
```
3. (*Optional*.) If your font has multiple weights or styles, replace **`unset`** with the values for those properties. **Example**:
```css
:root {
--font-family-heading: Custom Font Name;
--font-weight-heading: 400;
--font-style-heading: italic;
}
```
4. Click **Save**.
> Click **Preview Store** to test and troubleshoot your code before publishing the theme.
## **Apply fonts to specific elements**
***
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;
}
```
## Adding fonts with custom.css file
***
While we recommend using the available Custom CSS settings in the theme editor, you can use Eclipse’s `custom.css` file to organize your custom code in a single place.
### Enable useCustomCSS
To import the `custom.css` file, you need to enable `useCustomCSS` in the **`theme-globals.liquid`** file.
STEPS
1. Open the **`theme-globals.liquid`** file in the **Snippets** folder.
2. Find the **`useCustomCSS`** variable and set it to **`true`**.
```jsx
{% assign useCustomCSS = false %}
```
3. Open the **`custom.css`** file in the **Assets** folder.
4. Add your custom code to import font files and apply them to your theme text.