- Before You Begin
- Uploading Custom Font Files
- Adding Third-Party Fonts
- Adding Self-Hosted Fonts
- Tips for Best Results
- Troubleshooting
Before You Begin
To add a custom font in Slider Revolution, you’ll need to have a few things ready.
There are three ways to add a custom font, and what you need to prepare depends on which you use.
Direct Font Upload
If you want to upload font files directly, you will need the font files themselves in one of the supported formats: .woff2, .woff, .ttf, or .otf. You will need one file per weight and style you intend to use, and you’ll need to decide on a font family name. This is the quickest method, as Slider Revolution handles the @font-face CSS for you and detects each file’s weight and style automatically. Instructions are in the Uploading Custom Font Files section below.
Third Party Fonts
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.
Self Hosted Fonts
If you plan to self-host your fonts via your own CSS file, 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 all cases, you should know the exact font family name you want to use, 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.
Uploading Custom Font Files
The Upload Custom Font form lets you upload a batch of font files in one go. Slider Revolution reads each file, detects its weight and style, and generates the @font-face CSS needed to load it. No CSS file of your own is required.
Step 1: Gather your font files. The supported formats are .woff2, .woff, .ttf, and .otf.
Upload one file per weight or style. For example, a full set for the Barlow font would include separate files such as Barlow-Regular.ttf, Barlow-Bold.ttf, Barlow-Italic.ttf, Barlow-BoldItalic.ttf, and so on for each variant you need.
Only gather the variants you actually intend to use in your designs, as every additional file adds to the total weight of the font that has to be loaded.
Step 2: 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 3: Click the Fonts tab 1 at the top of the Global Settings panel.
Step 4: Scroll down to the Custom Fonts section and click the Upload Custom Font button 1.
The Upload Custom Font form will open.
Note this is a different button to Add Custom Font, which is used for the CSS URL based methods covered in the following sections.
Step 5: In the Font Family Name field, enter the name you want to use for the font, for example Barlow.
This is the name that will appear in the font selector in the Module Editor, so choose something recognisable.
The Font Family Name must be set before you upload any files.
Step 6: Click the Upload Files button.
A file browser will open. Select all the font files for your font family. You can select multiple files at once, so there is no need to add them one at a time.
Step 7: Review the list of uploaded files.
Each uploaded file appears as a row showing the file name, the detected font weight, and the detected style of either Normal or Italic.
If a file’s weight or style has not been detected as you expect, you can correct it. Edit the number in the weight field, or change the style using the dropdown. The standard weight values are 100 for thin, 200 for extra light, 300 for light, 400 for regular, 500 for medium, 600 for semi bold, 700 for bold, 800 for extra bold, and 900 for black.
To remove a file you added by mistake, click the delete button at the end of its row.
Step 8: Click the Add Font button to add the font.
If you decide not to proceed, click the Cancel button instead to close the form without adding anything.
Step 9: 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 entry in the Custom Fonts section.
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.
Take care to click Add Custom Font here and not Upload Custom Font, which is used for the file upload method covered in the previous section.
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, the simplest approach is to use the Upload Custom Font form covered in the Uploading Custom Font Files section above, which handles the @font-face CSS for you.
Use the method below instead when you want to manage the CSS yourself, for example if you need @font-face options beyond weight and style, if the font files are already hosted elsewhere on your server, or if you want to keep the font loading CSS under your own version control.
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
Upload files when you have the files.
If you have the font files on hand and no reason to manage the CSS yourself, the Upload Custom Font form is the fastest and least error-prone route. It removes the two most common causes of custom font problems: a mismatched font family name or a broken CSS URL.
Always check the detected weights before adding.
Take a moment to scan the list of uploaded files and confirm the detected weight and style of each one before clicking Add Font. Correcting a mis-detected value takes seconds at this stage, and saves you troubleshooting a font that renders at the wrong weight later.
Choose font family names thoughtfully.
Use descriptive, consistent font family names. Keeping the name simple and free of special characters will help avoid mismatches between what you enter in Slider Revolution and what a 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 represents an additional network request and file download, which can affect page speed scores. This applies equally to files added through the Upload Custom Font form and weights listed in the Weight field.
Choose the right Load In option.
For CSS URL based fonts, 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 via your own CSS file, 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 Upload Files button does nothing.
The Font Family Name field must be filled in before font files can be uploaded. Enter a name first, then click Upload Files.
If a font file is rejected during upload.
Only .woff2, .woff, .ttf, and .otf files are accepted. Formats such as .eot, .svg, or a .zip archive of font files will not be accepted, so extract archives first and convert any unsupported formats before uploading.
If the font does not appear in the Module Editor font selector.
Confirm that you clicked Save Global Settings after adding the custom font. If you used the Upload Custom Font form, also confirm you clicked Add Font rather than Cancel. If you added the font via a CSS URL and it saved but still does not appear, check that the Name field 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.
For CSS URL based fonts, 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.
For CSS URL based fonts, 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 a 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.
For an uploaded font, confirm that you uploaded a file for that specific weight and style, as a variant with no file cannot be rendered. For a CSS URL based font, confirm that the weight you are trying to use is included in the Weight field. 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.
