I tried to upload two custom fonts via “Use Any Font” plugin that was explained in another forum post. However, “Use Any Font” will not work on my server. Is there any other way to upload a custom font into the customizer?

Thanks!
Caity

Thanks for writing in,

Can you please provide additional details of your issue.

Are you trying to use google font or Typekit font?

Can you please provide more information of the things you have done and the error/issue you’ve encountered?

Also, please provide the URL of the other forum post you mentioned.

Thanks

OK so I was referring to this thread:
https://theme.co/x/member/forums/topic/failed-to-load-my-own-custom-fonts/

I’m trying to add two new fonts that I downloaded that aren’t included in the google fonts under the customizer. I don’t have a typekit font, I just have font files.

Basically I’ve just tried to use the plugin “Use Any Font” and I contacted them and they said the plugin will not work on my server.

I’m up for any other solution.

Thanks!
Caity

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

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

You can manually override the custom font in any area using the Customizer, Custom > CSS section. Follow the example below.

header .x-brand.text {
    font-family: 'MyWebFont', sans-serif;
}

Hope that helps.

Any ideas?

add an important tag to it:

header .x-brand.text {
    font-family: 'MyWebFont', sans-serif !important;
}

I’ve tried that and it still isn’t working. I’m adding the code but it still isn’t working 🙁

Any ideas?

Thank you!