Setting custom fonts

Hi there! I have followed the instructions mentioned in this discussion to set a custom font: https://theme.co/apex/forums/topic/custom-font-2/.

I have uploaded them in the fonts folder in Godaddy (my hosting provider), and included the code in the style.css but it doesn’t change the font.

Can you help?

Thanks!

Hi there,

Thanks for writing in! Please follow steps below on how to add custom font

  1. Set-up child theme – https://theme.co/apex/forum/t/setup-how-to-setup-child-themes/57
  2. Convert your font file to these extensions (eot, woff2, woff,ttf svg)
    you can try to convert on this site http://www.font2web.com/
  3. create fonts folder in your child theme directory (wp-content/themes/x-child/fonts)
  4. Upload all font files to your fonts folder(wp-content/themes/x-child/fonts) using ftp
  5. Add the code in the Theme Options > CSS:
@font-face {
  font-family: 'MuseoSlab ';
  src: url('http://www.yoursite.com/wp-content/themes/x-child/fonts/MuseoSlab.eot'); /* IE9 Compat Modes */
  src: url('http://www.yoursite.com/wp-content/themes/x-child/fonts/MuseoSlab.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('http://www.yoursite.com/wp-content/themes/x-child/fonts/MuseoSlab.woff2') format('woff2'), /* Super Modern Browsers */
       url('http://www.yoursite.com/wp-content/themes/x-child/fonts/MuseoSlab.woff') format('woff'), /* Pretty Modern Browsers */
       url('http://www.yoursite.com/wp-content/themes/x-child/fonts/MuseoSlab.ttf')  format('truetype'), /* Safari, Android, iOS */
       url('http://www.yoursite.com/wp-content/themes/x-child/fonts/MuseoSlab.svg#svgFontName') format('svg'); /* Legacy iOS */
}

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

Change yoursite.com with your domain and MuseoSlab with the filename of your font.

For more information please refer to this link https://css-tricks.com/snippets/css/using-font-face/

Hope this helps.

Hi Nabeel!

Thank you so much for such detailed instructions.

I have done as you suggested, but don’t see any font updates reflected in the CSS.

I can see a things I may have done wrong:

  1. Where you said “add the code in the them options > css”. What I did, is to select the Pro Chld theme, and then click ‘customize’. Then there is an ‘additional CSS’ link. That’s where I added the code. is that correct?
  2. I use the following font: Crops Bold. Perhaps this is not a webfriendly font, and it uses the fall-back font?

PS I have uploaded the ttf, woff and woff2 versions of the font. So not the .eot, but these are for older IE versions anyway, and I am on the latest version of chrome.

Thanks very much for your help!

Hi Nabeel,

I have found what i did wrong. I edited in the CSS in the theme options section now.

Thanks for the help!

Glad you’ve sorted it out.

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.