Building for clients? One license, up to 250 sites

Latest version: *.*.*

Buy now

Help center

/

FAQs & tutorials

/

How to Add Custom Fonts in Slider Revolution 7

How to Add Custom Fonts in Slider Revolution 7

Custom fonts allow you to use typefaces beyond the built-in Google Fonts or Websafe fonts list. You can load fonts from a third-party CDN such as Adobe Fonts, or serve your own self-hosted font files.

Before You Begin

To add a custom font in Slider Revolution, you’ll need to have a few things ready.

If you plan to load fonts from a third-party CDN such as Adobe Fonts or Bunny Fonts, you will need the CSS URL that the CDN provides for your chosen font. Adobe Fonts provides this URL from within your Adobe Fonts kit, and Bunny Fonts provides it directly from their font directory.

If you plan to self-host your fonts, you will need your font files uploaded to your server and a CSS file containing @font-face declarations ready to go. That CSS file will need to be publicly accessible via a URL. If you’re not sure how to set this up, you can find detailed instructions in the Adding Self-Hosted Fonts section below.

In either case, you should know the exact font family name as it is declared in the CSS file, the font weights you intend to use, and whether you need the font available in the Module Editor, on the live front end, or both.

Adding Third-Party Fonts

Third-party font CDNs like Adobe Fonts and Bunny Fonts provide a hosted CSS file containing all the @font-face code needed to load a font. All you need to do is point Slider Revolution to that CSS URL.

Step 1: From your WordPress admin area, navigate to the Slider Revolution Plugin Dashboard. In the Top Bar, click the Settings button 1 to open the Global Settings panel.

Step 2: Click the Fonts tab 1 at the top of the Global Settings panel.

Step 3: Scroll down to the Custom Fonts section 1 and click the Add Custom Font button 2. A new custom font configuration form 3 will appear.

Step 4: In the Name field, enter the font family name exactly as it appears in the CDN’s CSS file.

For example, if the CSS file declares font-family: 'Barlow', you must enter Barlow in this field. Entering a name that does not match the CSS declaration will cause the font to not display correctly.

Step 5: In the CSS URL field, paste the full URL for the CDN’s CSS file.

For Bunny Fonts, this will look something like https://fonts.bunny.net/css?family=barlow. For Adobe Fonts, this will be the CSS embed URL provided inside your Adobe Fonts kit. Make sure this URL points to a CSS file and not directly to a font file such as a .woff2 or .ttf.

Step 6: In the Weight field, enter a comma-separated list of the font weights you want to load.

For example, entering 400,400i,700 will load the regular weight, the regular italic, and the bold weight. Only load the weights you actually intend to use, as loading unnecessary weights adds to page load time.

Step 7: In the Load In dropdown, choose where the font should be loaded.

Select Editor & Live to make the font available both in the Module Editor and on the live front end of your site. Select Editor if you are handling front-end font loading through another method but still want the font to appear while you are designing. Select Live if you only need the font loaded on the front end.

Step 8: Click the Save Global Settings button in the bottom right corner of the panel to save your changes.

Your custom font will now be available to apply to a Text layer in the Module Editor under Design mode -> Style tab -> Text section -> Font.

Note if you need to delete the custom font, do so by clicking the delete button at the end of its configuration form.

Adding Self-Hosted Fonts

If you want to serve font files from your own server, you will need to upload your font files and create a CSS file that declares them using @font-face. You then point Slider Revolution to the URL of that CSS file.

Step 1: Obtain your font files in web-compatible formats. The .woff2 format offers the best compression and is supported by all modern browsers. It is recommended to also include a .woff fallback for broader compatibility.

Step 2: Upload your font files to your web server. A logical place to put them is inside your active theme’s folder, for example at /wp-content/themes/your-theme/fonts/.

Make a note of the public-facing URLs for each uploaded file.

Step 3: Create a CSS file, for example named custom-fonts.css, and write your @font-face declarations inside it. Each declaration block should include the font-family name, the src paths pointing to your uploaded font files, the font-weight, and the font-style.

A declaration for a regular weight font might look like the following:

@font-face {
  font-family: 'MyCustomFont';
  src: url('/wp-content/themes/your-theme/fonts/mycustomfont.woff2') format('woff2'),
       url('/wp-content/themes/your-theme/fonts/mycustomfont.woff') format('woff');
  font-weight: 400;
  font-style: normal;
}

Add a separate @font-face block for each weight and style variant you need to support.

For extensive information on how to prepare @font-face CSS visit MDN Web docs.

Step 4: Upload your completed CSS file to your server and note its public-facing URL, for example https://yourdomain.com/wp-content/themes/your-theme/fonts/custom-fonts.css.

Verify by visiting the URL in a browser to confirm the file is publicly accessible.

Step 5: From your WordPress admin area, navigate to the Slider Revolution Plugin Dashboard. In the Top Bar, click the Settings button 1 to open the Global Settings panel.

Step 6: Click the Fonts tab 1 at the top of the Global Settings panel.

Step 7: Scroll down to the Custom Fonts section 1 and click the Add Custom Font button 2 to add a new custom font configuration form 3.

Step 8: In the Name field, enter the font family name exactly as you declared it in the font-family property inside your CSS file. Using the example above, you would enter MyCustomFont.

This field is case-sensitive and must match precisely.

Step 9: In the CSS URL field, paste the full public URL to your CSS file, for example https://yourdomain.com/wp-content/themes/your-theme/fonts/custom-fonts.css.

Step 10: In the Weight field, enter a comma-separated list of the weights declared in your CSS file. If you created @font-face blocks for weights 400 and 700, enter 400,700. To include an italic variant, append i to the weight, for example 400,400i,700.

Step 11: In the Load In dropdown, choose whether the font should load in Editor, Live, or Editor & Live, as described in Step 7 of the previous section.

Step 12: Click the Save Global Settings button in the bottom right corner of the panel to save your configuration.

Note if you need to delete the custom font, do so by clicking the delete button at the end of its configuration form.

Tips for Best Results

Choose font family names thoughtfully.

Use descriptive, consistent font family names in your @font-face declarations. Keeping the name simple and free of special characters will help avoid mismatches between what you enter in Slider Revolution and what the CSS file declares.

Check the CSS URL.

When loading fonts from a CDN, always verify the CSS URL is correct by opening it directly in your browser before entering it into the CSS URL field. A URL that returns an error or redirects to a font download rather than a stylesheet will cause the font to fail silently.

Prefer .woff2 and .woff files.

For self-hosted fonts, always prefer .woff2 as your primary format for modern performance, and include a .woff fallback for reliability across a wider range of browsers and devices.

Only load what you need.

Only load the font weights you actually plan to use in your module designs. Each weight added to the Weight field represents an additional network request and file download, which can affect page speed scores.

Choose the right Load In option.

If you want to preview how your custom font looks in the Module Editor before publishing, set the Load In dropdown to Editor & Live from the start. Choosing Live only means you will not see the correct font while you are designing, which can make layout work more difficult.

Select a sensible font file location.

When self-hosting, placing your font files and CSS file inside your active theme’s folder or a dedicated /fonts/ directory in your server’s public root are both sensible options. Avoid placing them in locations that may become inaccessible after a plugin or theme update.

Troubleshooting

If the font does not appear in the Module Editor font selector.

Confirm that you clicked Save Global Settings after adding the custom font configuration. If you saved but still cannot see the font, check that the Name field in the configuration form matches the font-family value in the CSS file exactly, including capitalisation.

If the font appears in the editor but not on the live front end.

Check the Load In setting for the font. If it is set to Editor only, change it to Editor & Live and save. Also confirm that the CSS URL is publicly accessible to external visitors and is not blocked by any password protection, firewall rule, or .htaccess restriction.

If the font is not loading at all on any page.

Open the URL from the CSS URL field directly in a browser. If it does not load, returns a 404 error, or prompts a file download, the URL is incorrect or the file is not publicly accessible. Correct the URL or file location and try again.

If the self-hosted font displays fallback text in a different font.

This usually means the Name field entered in Slider Revolution does not match the name declared in the CSS file, or the CSS file has a syntax error in the @font-face block. Open your browser’s developer tools and check the Network tab to see whether the font file is being requested and whether the request is succeeding.

If Adobe Fonts loads fonts in the editor but they disappear after saving.

Adobe Fonts CSS URLs generated from a kit sometimes include usage restrictions or referrer checks. Verify that your domain is included in the allowed domains list within your Adobe Fonts kit settings, as Adobe may block the CSS file from loading on domains not listed in the kit configuration.

If the font weight or italic style is not rendering correctly.

Confirm that the weight you are trying to use is included in the Weight field of the configuration form. If you want italic text to render correctly, ensure you have added the italic variant to the Weight field with the i suffix, for example 400i, and that the corresponding @font-face block exists in the CSS file with font-style: italic.

In this article

back to overview