Use your own Fonts

Slider Revolution supports a wide range of Google Fonts. But you can also apply a custom webfont.

Table of Content

  • Step 1 : Get the custom font on your server
  • Step 2 : Apply on text layer
  • Step 3 : Enable the custom font selection in editor

Important Notice

If the webfont you want to use is already being loaded by your WordPress Theme you can skip the first step and go ahead to step 2 directly.

Step 1

For this example, we’ll use the Open Sans font from FontSquirell. After visiting that link, click the Webfont Kit tab, and then click the Download @font-face kit button:

Next, unzip the downloaded file, and then open the html file named How_to_use_web_fonts.html, and review the information in this document.

Next, click the download’s webfont folder, and then click on the opensans_bold_macroman folder. Inside this folder, you’ll see the following font files:

Next, using an ftp program, upload the fonts to your website. For this example, we’ll create a new directory called webfonts inside the wp-content directory. So the fonts would be uploaded via ftp here:

wp-content/webfonts/

Next, open the “stylesheet.css” file in a text editor:

and modify the urls to be absolute, so they’re loaded from the wp-content/webfonts/ directory. Here’s an example:

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

Next, copy this CSS to your computer’s clipboard, and paste it into your Module’s Custom CSS section.

Step 2

To officially apply the font to one of your Text Layers, select the Layer on the editing stage and then add a unique class inside the Attributes section.

And then open the Custom CSS modal and apply the font to the class, using the “!important” declaration.

Step 3

Navigate to Global Settings and locate the “Enable custom font selection in editor” option

Insert the “font-family” name into the text box.

Example: CustomA, CustomB

Then the “font-family” will appear in the “Text Layer” > Style > “font-family” dropdown list

Use your own Fonts

The Author

KC

Strength does not come from winning. Your struggles develop your strengths. When you go through hardships and decide not to surrender, that is strength.

Liked this Post?
Please Share it!