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
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
