Docs

[Noellemena]

Hey I am using Essential Grid (theme punch) and I know you can pull a google font in for the title on posts through a grid but can I pull in my webfont that I uploaded to hosting?? I use the @fontface in my CSS to use it through out the site. I am so hoping YES! 🙂 Thanks!
This is for my client’s site http://myjourneyoffaith.com/

THANK YOU!
Noelle

[Rupok]

Hi Noelle,

Here goes the step by step guide to add custom webfont to your site.

You can add custom fonts to your website using CSS3 @font-face rule. To do this, please review this article: http://css-tricks.com/snippets/css/using-font-face/

Basically you need to add the following code in your child theme’s style.css file (if you haven’t installed a child theme, please visit this to install Child Theme):

@font-face {
  font-family: 'MyWebFont';
  src: url('path-to-your-font-directory/font_name.eot');
  src: url('path-to-your-font-directory/font_name.eot?#iefix') format('embedded-opentype'),
       url('path-to-your-font-directory/font_name.woff') format('woff'),
       url('path-to-your-font-directory/font_name.ttf')  format('truetype'),
       url('path-to-your-font-directory/font_name.svg#svgFontName') format('svg');
}

Replace MyWebFont with the name of your font, path-to-your-font-directory with your fonts directory URL (e.g, http://yourwebsite.com/fonts) and font_name with your font’s name.

Next, whenever you need to use this font, simply use “MyWebFont” (or your custom font name), e.g:

body {
   font-family: 'MyWebFont', sans-serif;
}

Hope this helps. 🙂

Thank you.

[Noellemena]

Hey, you’ve misunderstood. 🙂 I already have a web font uploaded and working. I do that on all my clients sites. What I need to know is how, if, I can use it in essential grid by theme punch. It seems you can only pull google fonts in to customize a grid, but you always pull out some awesome CSS to make things possible! 🙂 Is there any? I want the titles in my grid to be my webfont that is already in place. Thanks!

[Rupok]

Hi there,

The above steps cover that I believe. I have set the example :

body {
   font-family: 'MyWebFont', sans-serif;
}

So what you need is to declare the font-family for the ES Grid with Custom CSS. I can’t see your site live so can’t provide more tailored code right now. But if you provide access and point us the elements; surely we can provide more tailored code for you.

Cheers!

[Author]

Posts