The Worlds Most Powerful
WordPress Builder

If you Purchased & Registered a Slider Revolution License you can comfortably upgrade version 5.x to 6.0 from your WordPress Dashboard.

Why Activate Slider Revolution?

Activating Slider Revolution with your Personal Purchas Code will unlock all available Features.

Easy Live Updates
Personal License Key
200+ Template Library
1000+ Object Library
25+ Amazing Add-Ons
1on1 Ticket Support

*Regular License from $26. One License Key required per Domain.

Slider Revolution 6.0 NOW available!

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

Important 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 METRO from fontsquirrel

Click on the “Webfont Kit” tab, and select all Font formats. 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 “metro_regular_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:

Modify the URLs to be absolute, so they’re loaded from the “wp-content/webfonts/” directory. Here’s an example:

@font-face {
    font-family: ‘metroregular’;
    src: url(‘http://www.mywebsite.com/wp-content/webfonts/Metro-webfont.eot’);
    src: url(‘http://www.mywebsite.com/wp-content/webfonts/Metro-webfont.eot?#iefix’) format(’embedded-opentype’),
         url(‘http://www.mywebsite.com/wp-content/webfonts/Metro-webfont.woff’) format(‘woff’),
         url(‘http://www.mywebsite.com/wp-content/webfonts/Metro-webfont.ttf’) format(‘truetype’),
         url(‘http://www.mywebsite.com/wp-content/webfonts/Metro-webfont.svg#metroregular’) format(‘svg’);
    font-weight: normal;
    font-style: normal;
 
}


Next, copy the CSS above to your computer’s clipboard, and paste it into your Parent/Child Theme’s “style.css” file.

Part 2 : Edit your Grid Skin.

Select a Layer and manually type the “Font Family” name into the “Style” section of the Layer.

Important Note

Adding custom fonts this way will not show up in the Item Grid Skin. However, as long as the steps above were followed correctly, the font will show up when you view the grid from the front-end of your site.

Popular Solutions