Unable to install custom font

Support
#1

Hello,

I’ve tried adding new fonts like explained here: https://theme.co/apex/forum/t/setting-custom-fonts/40839

However, I can’t find them in the list sitewide. And weirdly all my fonts have now been changed to Helvetica (initially, Rubik). I can,t seem to go back to how it was before. Or to use my new font Brown-Regular.

Please help.
Tatiana

#2

Hey Tatiana,

I’m sorry but I’m not sure by what you mean by:

Do you mean the Font Manger? If so, custom fonts, currently could not be integrated in the Font Manager. You need to manually use CSS whether by targeting the element using an ID or Class or by using the Element CSS.

Another possible reason why your custom font does not work is if you have a syntax error in your CSS. Please check all your custom CSS in http://csslint.net/ and see if you have any errors. If you do, you need to correct it.

After you have checked the suggestion above and the issue persists, please give us access to your WordPress Admin in a Secure Note

Thanks.

#3

Ok, I left a secure note. Thank you.

#4

Hi Tatiana,

If you’ve followed this thread https://theme.co/apex/forum/t/setting-custom-fonts/40839/2 then you must have this code as well:

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

The above code applies the custom uploaded font site wide which is the reason why the font you’ve selected from the list is not applying.as the above code is overriding the font. To fix the issue just remove the above code and then if you need to apply the custom font to the blog posts only then you can use this code instead:

.blog, .single-post {
  font-family: 'MuseoSlab', Fallback, sans-serif;
}

And if you need to apply this font on specific elements then you can create a class for that, for example custom-font and add the following code in your Child Theme’s style.css file:

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

Now you can assign this class to the elements.

Hope this helps!

#5

Thank you!

Can you help me figuring out why the font shows properly on my Mac, but not on my Mobile or PC? I’m accessing my site via Google Chrome in the three instances.

Also, I’m using the font properties font-style and font-weight, but can’t seem to understand how to bold my custom font. Is this something I can do or do I have to manually modify bold and italics text it each time, let’s say, for blog posts?

#6

Hi There,

It could be your custom font is installed on your Mac locally, or it could be caching related on your Google Chrome browser, try clearing your Chrome browser’s cache.

Currently, the site is only loading the Brown-Light, would you mind moving all your @font-face statement to your child theme’s style.css file? That needs to be on the top of other CSS rules.

On Theme Options > Typography I saw your HEADINGS FONT is set to Rubik. If you want Brown on your Headlines, please add this CSS rule.

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6, h1 a, h2 a, h3 a, h4 a, h5 a, h6 a, .h1 a, .h2 a, .h3 a, .h4 a, .h5 a, .h6 a, blockquote {
	font-family: 'Brown-Light',Fallback,sans-serif !important;
}

If you are still having the issue after this, please provide us with FTP credentials in a secure note, so we can take a closer look.

And if possible, provide us the link where did you get the font Brown so we know exactly how that looks.

Thanks,

#7

Hello,

Thank you for this. The site looks good, however, I’m not sure how to update my .css style sheet. I don’t think I have the knowledge to do it. Can you help?

#8

This is what the font looks like when properly applied (Headlines and body text)

#9

Hello @tats86,

Thanks for updating the thread.

Can you please confirm that FTP details. I am getting following message. As we are accessing the site via FTP, I remove HTTPS while entering the host URL above and entered secure FTP protocol and unsecured but even though I am getting:

Error:        	Connection timed out after 20 seconds of inactivity
Error:        	Could not connect to server

Please confirm that FTP details.

Thanks.

#10

Yes, it is the correct address to my cSpace. the only thing I noticed is my user name is in small caps.

#11

Hi There,

I did go ahead and fix it. Your headlines now are in Brown-Bold and the body text are in Rubik



All your 3 variants of Brown fonts are working now, Brown-BoldItalic, Brown-Bold, and Brown-Light, you can use that with that font-family names respectively.

Here’s what I did, I added !important statement here.

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6, h1 a, h2 a, h3 a, h4 a, h5 a, h6 a, .h1 a, .h2 a, .h3 a, .h4 a, .h5 a, .h6 a, blockquote {
	font-family: 'Brown-Bold', sans-serif !important;
}

To make sure ‘Brown-Bold’ is applied to headlines.

Then I remove this:

body {
  font-family: 'Brown-Light', sans-serif;
}

So the Rubik font is applied to your body text, and won’t be overwritten.

I also remove all your @font-face statement from the Theme Options > CSS, because you already have that in child theme’s style.css file declared.

Then lastly, I have cleared the W3 Total Cache to make sure that all my changes are applied.

Please clear your browser’s cache too.

Hope it helps,
Cheers!

#13

Perfect, thank you, but the only thing is that body text is not rubik, but needs to be Brown Light.

#14

And I did clear my cache, but the Brown headline doesn’t appear. Everything is in Rubik now.

#15

Hi @tats86

I’ve checked your website and I don’t see everything in “Rubik”, the body is in “brown light” and the headings in “brown bold”, check this screencast:

I recommend clearing your browser cache or using another browser to rule out the caching issue, I recommend using Chrome incognito mode.

Thanks.

1 Like
#16

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