Docs

[caldrete23]

I followed the instructions given on this the topic “INSTALLING CLOUD.TYPOGRAPHY WEB FONT TO X THEME” but now that I have uploaded the new child theme I can’t for the life of me figure out how to apply the font. I only want the font for my headlines but when I access the theme options and go to the typography section the headline font selection dropdown only has system and google fonts to choose from.

[Joao]

Hi There,

Thank you for posting by!

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): https://community.theme.co/kb/how-to-setup-child-themes/

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

h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6  {
   font-family: 'MyWebFont', sans-serif;
}

Hope this helps. 🙂

Thank you.

Joao

[Author]

Posts