Use fonts other than Google Fonts

Slider Revolution supports Google Fonts which are described here. But if you want to load a custom webfont, here’s how this can be achieved:

SPECIAL NOTE: If the webfont is already being loaded by your theme, skip to Part 2 below.


Part 1

For the purposes of this article, we’ll use Open Sans 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:



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:


Next, copy this CSS to your computer’s clipboard, and paste it into the slider’s Custom CSS section:



Part 2

Next, edit a Text Layer, and manually type the font-family name into the “Style” section for the Layer:


IMPORTANT NOTE! Adding fonts this way usually will mean that the custom font won’t show up in the slider’s admin back-end. However, as long as the steps above were followed correctly, the font will show up when you view the slider from the front-end of your site.