How to add a Custom Font in Slider Revolution (Google or Local)

Building an awesome slider for your website it's very important. To create an impact on your audience usually custom beautiful fonts are needed. That's why we will help you learn how to add a custom font in the Slider Revolution plugin.

Adding a Custom Font in Revolution Slider can be tricky for a normal user and even for more experienced.  Revolution Slider is the most downloaded Premium Slider for WordPress, Jquery, and Shopify

I think this tutorial will be very useful for a lot of webmasters.

In this step-by-step tutorial, I will guide you on how to add a custom font to the Revolution Slider.

Slider Revolution is very customizable with Google Font included, so you can choose from different 600+ free fonts. Sometimes you want to upload a custom font that has to be added to the slides of the Revolution Slider.

Step 1: Download the font and load it into the CSS file

First, you have to download the font in the web format, normally the fonts come in three formats eot, woff, ttf, svg packaged. Also, you will find font stylesheet.css.

After downloading the package you have to upload the font files with the FTP client in your web hosting in some folder in the wp-content/webfonts.

Now we have to load the specific font files with the CSS instructions below:

@font-face {
font-family: 'sansbold';
src: url('http://www.mysite.com/wp-content/webfonts/Sans-Bold-webfont.eot');
src: url('http://www.mysite.com/wp-content/webfonts/Sans-Bold-webfont.eot?#iefix') format('embedded-opentype'),
url('http://www.mysite.com/wp-content/webfonts/Sans-Bold-webfont.woff') format('woff'),
url('http://www.mysite.com/wp-content/webfonts/Sans-Bold-webfont.ttf') format('truetype'),
url('http://www.mysite.com/wp-content/webfonts/Sans-Bold-webfont.svg#open_sansbold') format('svg');
font-weight: normal;
font-style: normal;

}

 

Step 2: Load CSS into the Slider Revolution panel

Now we have to add the CSS above into the Slider Revolution Plugin settings.  Log into WordPress Dashboard > Revolution Slider > Settings and in the CSS/jQuery button add the CSS lines.

Insert the lines below in the CSS/Jquery text field.

@font-face {
font-family: 'sansbold';
src: url('http://www.mysite.com/wp-content/webfonts/Sans-Bold-webfont.eot');
src: url('http://www.mysite.com/wp-content/webfonts/Sans-Bold-webfont.eot?#iefix') format('embedded-opentype'),
url('http://www.mysite.com/wp-content/webfonts/Sans-Bold-webfont.woff') format('woff'),
url('http://www.mysite.com/wp-content/webfonts/Sans-Bold-webfont.ttf') format('truetype'),
url('http://www.mysite.com/wp-content/webfonts/Sans-Bold-webfont.svg#open_sansbold') format('svg');
font-weight: normal;
font-style: normal;

}

.my_font{font-family:sansbold !important}

The class .my_font adds the specific custom font family in the  Revolution Slider  Text layer element.

Step 3: Create text layer and apply the new font

You have to add the Text Layer in the slide and in the Layer Option > Attributes in the Classes field type the “my-font” class that we have created in the previous paragraph. Click on save so you can check the new custom font.

You can replicate the process for other text layer elements of the Revolution Slider. If you to want enjoy some free slider revolution templates come and check our post: Revolution Slider Free Templates.

Slider Revolution Settings

For Slider Revolution settings, you need to go to the plugin and find the icons on the top of the front page. Here, click “Globals. “
 

Next, add the name of the font family which you used in the style.css and functions.php files.
Then, you can start using YourFontFamily from the slide editor in the pull-down menu. There is no need for custom CSS over the layer.
 

Great, you have successfully worked with the Slider Revolution WordPress Plugin v6 to add a custom font and without any problem. You are now ready to create wonderful content with your customized font