Docs

[patrobles]

Hi X

My client has asked me if she can use a custom font (I have the font files) for certain specific strings. If it wasnt a wp website I would create a class in the global CSS which invokes the desired fonts before the fonts used on the website and then use that class for the specific strings. ¿Can this be done in X as well? If there’s an easier method, could you guys hepl me out with it?

I dont think its relevant, but the site in question is http://puntoverde.com.mx

[Rupok]

Hi there,

You can point us the text you want to change so that we can have a look.

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

[Author]

Posts