Custom Fonts for Essential Grid

Essential Grid supports Google Fonts , but if you want to load a custom webfont, here’s how this can be achieved.

Part 1:

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

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:


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('');
    src: url('') format('embedded-opentype'),
         url('') format('woff'),
         url('') format('truetype'),
         url('') 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.

Custom Fonts for Essential Grid

Further Resources for Web Design and Development Enthusiasts

Alright! We've embarked on quite an adventure exploring the realms of this topic. But why stop there? The world of web design and development is vast, and there's always more to learn and discover. Let's dive into some resources that'll keep your knowledge fresh, your skills sharp, and your passion ignited:

The Author


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!