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:

/* ==========================================================================
   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:

{
  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?

Troubleshooting Shopify Custom Fonts

Updated on: 23/09/2026