Uses Your Own Fonts with Slider Revolution

Would you like to use fancy web fonts in your Slider Revolution modules? You can now add any web font you like by following the steps in this tutorial.

Bring Your Fonts To Slider Revolution

Slider Revolution comes with a wide range of Google fonts ready to go. You do not have to download or install any Google fonts you wish to use.

But if you would like to use custom web fonts, that is also possible.

You can import any web font into the Slider Revolution plugin by:

  • Uploading font and CSS files to your website.
  • Adding a URL of a CSS file to the global settings of the Slider Revolution plugin.

In this tutorial, we’ll step through a complete example of choosing a custom web font, downloading it, adding it to Slider Revolution, and using it in a module [?] A module in Slider Revolution acts as a container for slides, which in turn act as containers for layers. Modules are created and edited with the module editor.

A "module" is a single, self contained piece of content. You can think of this as being similar to the way a post or page in regular WordPress is a self contained piece of content.

A module can represent any kind of content Slider Revolution is capable of creating, such as a slider, carousel, hero unit, navigation menu, posts display and so on.

Multiple modules can be combined to form rich content such as complete sites and landing pages.
.

Web Font Websites

There are many free, and also paid, custom web fonts available on the internet that you can choose from. 

Here are some examples of websites where you can download web fonts. This isn’t an exhaustive list of all web font sites available, but you’ll find plenty of interesting fonts among them:

We are going to use onlinewebfonts.com as an example for this guide. 

The onlinewebfonts.com website has free fonts available in the WOFF2 file format. Typically when you download a font there will be several different file types available. However, WOFF2 is the newer and better-compressed file type that will help your website load faster.

Select a Web Font Style

In this section, we will select the Moca font to use as an example. But you could choose any font you like.

Go to onlinewebfonts.com:

Search for a font you like to use, e.g. Moca:

Select the font:

Download Font WOFF2 File

We are now going to download the selected font’s WOFF2 file.

Select the WOFF2 file format only, from the left sidebar:

Note: If you need to support older browsers like IE11 you may also want to download a WOFF file to act as a fallback, but for the purposes of this tutorial we’ll just work with the WOFF2 format, compatible with all modern browsers.

Click the Download button:

Save the font somewhere easy to find on your computer.

Create a CSS File With @font-face

In this section, we will create a CSS file and add information about the custom font to it using @font-face, which is a special CSS rule used for loading custom font files.

Sometimes font files come with CSS included in the download, but the code you get may not always use the latest standards. To help ensure you get up-to-date CSS we have created a code sample that shows you how to load web fonts efficiently.

Download the CSS sample code file from this link. (Alternatively, raw code is available below if you’d prefer to make your own CSS file).

Before we edit the CSS, let’s prepare the font files. Unzip the font zip file you downloaded earlier:

Create a new folder and name it webfont:

Copy the Moca.woff2 file from the unzipped folder:

Paste the Moca.woff2 file to the webfont folder:

Next, unzip the CSS code sample file you have downloaded:

Find the custom-font.css file in the unzipped folder:

Move the custom-font.css file to the webfont folder:

Open the custom-font.css file with a plain text editor like Notepad or Text-Edit. Alternatively, to help make reading the code easier, use an editor like Sublime Text or VS Code.

The code sample will look like this before editing:


@font-face {
     font-family: 'Custom Font';
     src: local('Custom Font'),
         url('/webfont/custom-font-regular.woff2') format('woff2'),
         url('/webfont/custom-font-regular.woff') format('woff');
     font-weight: normal;
     font-style: normal;
     font-display: swap;
}
 
/*
Include an additional @font-face block for each font file in the family.
Change the font-weight and font-style value to match each font file
*/
@font-face {
     font-family: 'Custom Font';
     src: local('Custom Font'),
         url('/webfont/custom-font-bold.woff2') format('woff2'),
         url('/webfont/custom-font-bold.woff') format('woff');
     font-weight: bold;
     font-style: normal;
     font-display: swap;
 }

 @font-face {
     font-family: 'Custom Font';
     src: local('Custom Font'),
         url('/webfont/custom-font-italic.woff2') format('woff2'),
         url('/webfont/custom-font-italic.woff') format('woff');
     font-weight: normal;
     font-style: italic;
     font-display: swap;
}

You’ll notice that the sample includes three blocks of code, each beginning with @font-face.

The way this works is you will need one @font-face block of code for each font file you want to load. That code block specifies the following.

The name of the font-family:

The name of the font family should be specified first in the font-family property, and second in the src property between the brackets in local(). It’s good practice to wrap the font name in single quotes. For example:

font-family: 'Moca';
src: local('Moca'),

You can set whatever you want as the font family name. The font family name you set here will be the name you specify later when you use your custom font.

The reason for the inclusion of the local() function is so the browser will first check if the visitor has a locally cached copy of the font file before loading it from the internet.

If you’re using a relatively popular font you think has a good chance of being cached locally, make sure you use the official font name so the browser can effectively search for it.

The location of the related font file:

In order for a font file to be loaded the browser needs to be told where it is through the src property.

In our code example this is added a second comma separated value, after local().

The location of the file should be added between single quotes in the url() function and the file format is specified in the format() function.

For example:

src: local('Moca'),
     url('/webfont/Moca.woff2') format('woff2');

Note: It’s very important for the location you set in code to be an exact, case-sensitive match to the file and folder name. If there is a mismatch, such as your folder being named webFont while the code says webfont, your custom font will fail to load.

In our current example, we’re only loading a WOFF2 file. However, if you need to specify additional files as fallbacks you can add extra, comma-separated pairs of url() and format() functions, as seen in the original code sample file where a WOFF file is also loaded.

The weight and style of the font file:

Every font file has a particular weight, such as normal or bold, and a particular style, such as italic or normal. The @font-face block for a font file needs to specify what its weight and style are.

This is done by adding font-weight and font-style properties. For example, the Moca font file is normal weight and normal style, so these lines are added to its code block:

font-weight: normal;
font-style: normal;

In the case of the Moca font, there is just one variant in the family: the normal weight and style variant.

However, if a font family download also came with an additional file that provided a bold variant of the font family, the second block of @font-face code would be needed to load that variant.

Such a second block of @font-face code would use the same font family name but would specify the second file’s location. Typically a bold variant’s filename would be something like “fontname-bold.woff2”.

A second block of @font-face code for a bold variant would also have to change the font-weight specification to font-weight: bold;.

The sample code provided has three @font-face blocks to show you examples of loading different weight and style variant files that are members of the same family.

If you wish to use multiple fonts (e.g: Moca and Philosopher) you can also add @font-face blocks for additional font families into the same CSS stylesheet. Just make sure that every variant that belongs to the same font family uses the same font name in its @font-face block.

Alternatively, you can use separate CSS files for each font family, e.g. “moca-font.css” and “philosopher-font.css”. It depends on what works best for your site and your organizational preferences.

As a final note, each @font-face block should include the line font-display: swap;. This line ensures text is visible while font files are loading, making the page loading experience smoother for visitors.

Here’s the CSS code we ended up with to load the Moca font:

@font-face {
     font-family: 'Moca';
     src: local('Moca'),
         url('/webfont/Moca.woff2') format('woff2');
     font-weight: normal;
     font-style: normal;
     font-display: swap;
}

Press CMD+S / CTRL+S to save the file:

Upload File to Your Website

At this step, we are going to upload the “webfont” folder to the website’s directory through FTP using Filezilla software.

If you do not have the FTP login credentials for your hosting account, contact your hosting provider to get the host address, username, and password.

Alternatively, you can upload the folder through either cPanel or any file manager WordPress plugin.

Note: You should be cautious when using any third-party plugin on a live production website. If you choose to use a file manager plugin, create a full website backup, update WordPress, your theme, and all other plugins to the latest version on your website. Also, choose a file manager plugin that supports the latest version of WordPress.

Now, follow these steps to upload the folder.

Open FileZilla:

Input the FTP login credentials for your website:

Click the Quickconnect button:

Go to the root directory of your WordPress site and upload the “webfont” folder there:

“wordpressdirectory/[upload folder here]”

Note: You’ll know you’re in the root WordPress folder because you’ll also see directories named “wp-includes”, “wp-content” and “wp-admin”, like this:

Drag and drop the webfont folder inside the root WordPress folder:

“wordpressdirectory/webfont”

If this step is completed successfully your root WordPress directory should now look like this:

Add Custom Font to Slider Revolution Global Settings

In this section, we will provide Slider Revolution with the URL of the custom font CSS file we just uploaded, as well as the font name and available weights.

Go to your website’s WordPress dashboard:

Go to the Slider Revolution plugin:

Go to Global settings from the top bar inside the Slider Revolution plugin:

Click on the Edit Custom Fonts button:

Add the font name “Moca” in the Font Family Name field:

Add the font’s CSS file URL to the Font CSS URL field. As long as you uploaded your “webfont” directory to the root folder of your WordPress site, the URL to use will be /webfont/custom-font.css, or if you prefer you can use a full domain e.g. <yourdomain>/webfont/custom-font.css:

Add the weights available for your custom font to the Available Font Weights field, as a comma separate list of numbers. The Moca font is only available in normal weight, which is represented by the number 400, so we’ll just enter the number 400 in this field:

Toggle the options Front End and In Editor to ON:

If you are adding multiple font families you can click the Add Custom Font button to make another entry for each additional font family.

If you defined the @font-face blocks for all the font families in the one “custom-font.css” file you can use the same /webfont/custom-font.css URL in each entry.

If you instead created a separate file per font family, e.g. “moca-font.css” and “philosopher-font.css”, specify those file names instead of “custom-font.css”.

When you’re done, click the X mark to close the Global Custom Fonts popup:

Click the Save Global Settings button:

Select Font Family for Text Layer(s)

In this step, we can select the newly added font and use it in the module editor [?] The "Module Editor" is the tool used to create & modify modules.

Through this visual, drag & drop, no-code interface you can add various types of layers, animation and special FX to your modules, as well as managing slides and configuring options.
.

Open a module [?] A module in Slider Revolution acts as a container for slides, which in turn act as containers for layers. Modules are created and edited with the module editor.

A "module" is a single, self contained piece of content. You can think of this as being similar to the way a post or page in regular WordPress is a self contained piece of content.

A module can represent any kind of content Slider Revolution is capable of creating, such as a slider, carousel, hero unit, navigation menu, posts display and so on.

Multiple modules can be combined to form rich content such as complete sites and landing pages.
in which you’d like to use the custom font:

Click on any text layer:

Go to Layer Options tab from sidebar:

Go to the Style sub-section:

Scroll down to the Font & Icon panel:

Click on the Font Family option to open a dropdown list:

Search for the Moca font:

Select the Moca font:

Click the Save button:

At this point, if everything has been done correctly, you can refresh the page and you should see the custom font applied to the text layer:

Force the Web Font

Forcing a web font through custom CSS is a solution if you get a style conflict with a theme or plugin that prevents your custom font from loading.

The steps below will help you force the Slider Revolution plugin to load the web font you have configured.

Assign a Custom Class to Text Layer(s)

Go to the module you’re working on:

Select the layer that needs to have a custom font:

Click on the Layer Options tab from the sidebar:

Go to the Attributes sub-section:

Add a class name of your choice, such as “customFont”, in the Classes field:

Click the Save button:

Add Custom CSS Code

Now we need to add the CSS to go with the custom class name.

In the Module General Options tab, click CSS/jQuery:

This will open the CSS/JS Editor window. Go to its CUSTOM CSS tab:

Create a class, matching the class name you just added. Add a font-family property and set it to use the custom font along with a fallback font stack, and the !important keyword at the end:

.customFont {
    font-family: 'Moca', Arial, sans-serif !important;
}

Click the X mark to close the CSS/JS Editor:

Click the Save button:

Refresh the page and you should now see your custom font loading correctly:

Stuck at Some Point? Contact Us

As always, if you have any further questions or need any additional assistance you can contact us via support ticket or email ([email protected]), we’re here to help.

Uses Your Own Fonts with Slider Revolution

The Author

Kashif

Technologist, Writer, Philosopher, and above all a problem-solver. Living by the motto "Be the reason someone smiles today".

Liked this Post?
Please Share it!

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.