[caity721Participant]

Hi!

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

[Kosher KMember]

Hi 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

[caity721Participant]

Hi!

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

[ZeshanMember]

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

[caity721Participant]

Thank you!!

[caity721Participant]

Is there a way to add the custom font to the customizer? I’d like to have all of the headers be the new font. Thanks!
Caity

[DarshanaModerator]

Hi there,

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.

[caity721Participant]

Hey!! So I went through everything diligently and it isn’t working 🙁

Any ideas?

[RubinKeymaster]

Hey There,

add an important tag to it:

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

[caity721Participant]

Hi!!

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!

[caity721Participant]

I would love to be able to make every single header the same font, just as it’s set up in customizer. It would be super helpful if I could just add a font in the options there or is that not possible?

[ChristopherModerator]

Hi there,

I’m sorry but it can not be added to customizer .
Please try this and still if it’s not working provide us with URL so we can see the issue

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

Thank you.

[caity721Participant]

This reply has been marked as private.

[ChristopherModerator]

Hi there,

I need your wordpress dashboard and FTP credential to check them both.
Thank you.

[caity721Participant]

This reply has been marked as private.

[Author]

Posts