> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://revolution-slider.crisp.help/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).
# How to Add Custom Fonts in Slider Revolution 7
Adding custom fonts to **Slider Revolution 7 on Shopify** works differently than the WordPress version.
Because Shopify is a hosted, cloud-based platform (SaaS), third-party apps cannot write font files to your server's local filesystem. Furthermore, uploading font files to an external server often triggers browser **CORS (Cross-Origin Resource Sharing)** errors that block fonts from rendering on your live storefront.
This guide covers the **two verified, 100% working methods** to integrate custom fonts with Slider Revolution 7 on Shopify:
1. **Method 1 (Recommended):** Upload to **Shopify Files** & declare `@font-face` in your Theme CSS (zero CORS errors, best speed).
2. **Method 2:** Connect a **Third-Party CDN** (Adobe Fonts / Bunny Fonts) via SR7's *Add Custom Font* (CSS URL).
---
## Method 1: Shopify Files + Theme CSS (Recommended & Most Reliable)
This is the official, standard method for all Shopify stores. Hosting your font files directly on Shopify’s global CDN completely eliminates CORS errors and guarantees instant rendering on both desktop and mobile.
### Step 1: Upload Your Font Files to Shopify
1. In your **Shopify Admin**, navigate to **Content > Files**.
2. Click the **Upload files** button in the top right.
3. Select your `.woff2` and `.woff` font files from your computer.
4. Once uploaded, click the **Link icon (🔗)** next to each file to copy its public Shopify CDN URL:
* *Example:* https://cdn.shopify.com/s/files/1/0123/4567/files/MyBrandFont-Bold.woff2?v=12345678
---
### Step 2: Add the `@font-face` Declaration to Your Theme CSS
1. In your **Shopify Admin**, go to **Online Store > Themes**.
2. Click the **three dots (`...`)** next to your active theme and select **Edit code**.
3. In the left file tree under **Assets**, open your theme's main stylesheet:
* For **Dawn** and modern OS 2.0 themes: open `base.css` (or `theme.css`).
* For older vintage themes: open `theme.scss.liquid` or `theme.css`.
4. Scroll to the very bottom of the file and paste your `@font-face` rule:
```css
/* ==========================================================================
Custom Brand Font for Slider Revolution
========================================================================== */
@font-face {
font-family: 'MyBrandFont';
src: url('PASTE_YOUR_REGULAR_WOFF2_URL_HERE') format('woff2'),
url('PASTE_YOUR_REGULAR_WOFF_URL_HERE') format('woff');
font-weight: 400;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'MyBrandFont';
src: url('PASTE_YOUR_BOLD_WOFF2_URL_HERE') format('woff2'),
url('PASTE_YOUR_BOLD_WOFF_URL_HERE') format('woff');
font-weight: 700;
font-style: normal;
font-display: swap;
}
```
5. Replace the placeholder URLs with the actual Shopify CDN links you copied in Step 1.
6. Click **Save** in the top right of the code editor.
---
### Step 3: Apply the Font in Slider Revolution 7
1. Go to **Shopify Admin > Apps > Slider Revolution** and open your slider in the Visual Editor.
2. Select the **Text Layer** or **Button Layer** you want to style.
3. Apply the font using either of these two ways:
#### Option A: Via Font Family Dropdown
* In the right sidebar, switch to **Design** mode > **Style** tab > **Text** section.
* If your custom font appears in the **Font Family** list, select it directly.
#### Option B: Via Layer Custom CSS (Guaranteed to Work)
If the font family does not appear in the editor dropdown (common in Shopify iframe sandboxes):
1. In the right sidebar with your text layer selected, scroll to the **Advanced** or **Custom CSS** section.
2. Enter the following rule:
```css
{
font-family: 'MyBrandFont', sans-serif !important;
}
```
3. Click **Save** and **Publish** in the top-right toolbar.
> [!NOTE]
> **Editor Preview vs. Live Storefront:**
> Because the Slider Revolution editor runs inside a secure Shopify admin iframe, the custom font may sometimes display as a system fallback inside the editor preview. Don't panic! Open your live storefront page—the font will render beautifully on the live site.
---
## Method 2: Third-Party Fonts via CSS URL (Adobe Fonts / Bunny Fonts)
If your brand uses a hosted font service like **Adobe Fonts (Typekit)** or **Bunny Fonts**, you can connect the hosted stylesheet URL directly through Slider Revolution 7's Global Settings.
### Step 1: Open Global Settings in SR7
1. In your **Shopify Admin**, open **Apps > Slider Revolution**.
2. Click the **Settings (⚙️)** gear icon in the top toolbar:
3. In the panel that opens, click the **Fonts** tab:
4. Scroll down to the **Custom Fonts** section and click **Add Custom Font**:
---
### Step 2: Configure the Font Details
Fill in the four configuration fields:
1. **Name:** Enter the font family name **exactly** as defined by your font service (e.g., `futura-pt` for Adobe Fonts or `Barlow` for Bunny Fonts).
2. **CSS URL:** Paste the public stylesheet URL:
* **Adobe Fonts:** https://use.typekit.net/xxxxxxx.css
* **Bunny Fonts:** https://fonts.bunny.net/css?family=barlow:400,700
* *(Must be a `.css` URL, not a direct `.woff2` file URL).*
3. **Weight:** Enter a comma-separated list of the weights you want to load (e.g., `400,400i,700`).
4. **Load In:** Select **Editor & Live** so the font loads both in your editor and on your live storefront.
5. Click **Save Global Settings** in the bottom-right corner:
> [!IMPORTANT]
> **Adobe Fonts Domain Whitelist Requirement:**
> Adobe Fonts enforces strict domain verification. Inside your Adobe Fonts Web Project settings, you **must whitelist both**:
> * Your primary storefront domain (e.g., `yourbrand.com`)
> * Your Shopify admin domains (`admin.shopify.com` and `yourstore.myshopify.com`)
> If you don't whitelist these, Adobe will block the font from rendering inside the Shopify editor!
---
## Summary: Which Method Should You Use on Shopify?
| Method | When to Use | Pros | Limitations |
| ---- |
| **Method 1: Shopify Files + Theme CSS** | You own `.woff2`/`.woff` font files | 🟢 Zero CORS issues
🟢 Fastest load speed
🟢 100% reliable | Requires adding a snippet to `base.css` |
| **Method 2: SR7 "Add Custom Font" (CSS URL)** | You use Adobe Fonts or Bunny Fonts | 🟢 No theme code editing
🟢 Configured directly inside SR7 | Must whitelist Shopify domains in Adobe |
---
## Troubleshooting Shopify Custom Fonts
| Issue | Cause | Solution |
| ---- |
| **Font renders on live store, but not inside the SR7 editor** | Shopify admin iframe security restriction | This is normal behavior for Shopify apps. As long as the live storefront renders correctly, your font is working properly. |
| **Font fails to load on live store (displays standard serif/sans-serif)** | Slider Revolution App Embed is disabled | Go to **Shopify Admin > Online Store > Themes > Customize > App embeds** and ensure **Slider Revolution** is toggled **ON**. |
| **CORS error in browser console (`Access-Control-Allow-Origin`)** | Font hosted on external server without CORS headers | Move your font files to **Shopify Admin > Content > Files** (Method 1). Shopify's CDN automatically serves the correct CORS headers. |
| **Adobe Fonts not loading** | Missing Shopify domains in Adobe kit | Open your Adobe Fonts Project and add yourstore.myshopify.com, admin.shopify.com, and your custom domain to the allowed list. |
| **Font appears at the wrong weight (e.g., bold when it should be thin)** | Missing `@font-face` weight block | Make sure you declared separate `@font-face` blocks for each weight (e.g., `400` for Regular, `700` for Bold) pointing to their respective `.woff2` files. |