Please note, this is a STATIC archive of website www.themepunch.com from 28 Sep 2016, cach3.com does not collect or store any user information, there is no "phishing" involved.

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:

webfontkit

 

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.

webfontkit2

 

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:

webkit3

 

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:

webkit2

 

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:

webkit4

 

Part 2

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

 

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.