Fonts Uncontrollable

Support
#1

Hello!

I’m trying to set the font-weight for the body copy on my new site and then use it through the Theme Options, but the interface is not responding.

I’ve set the font and weights in Templates, but the settings in Theme Options do nothing when I adjust them, and the same goes for Appearance>Customize

I’ve also tried forcing the font-weight through custom CSS inputs, both through Theme Options and the two different fields in Appearance>Customize.

None of this works… Please help

#2

Hi,

Thanks for writing in! To assist you with this issue, we’ll first need you to provide us with your URL. This is to ensure that we can provide you with a tailored answer to your situation. Once you have provided us with your URL, we will be happy to assist you with everything.

Thank you.

#3

Well, the staging environment is closed to the public.
I can give you some login credentials in the secure note

#4

Hi there,

The login URL is pointing to a coming soon page, I tried different login URL (eg. wp-login.php and wp-admin) and none is working. Please check and let us know :slight_smile:

For the meantime, please provide the details of the font you’re implementing (eg. font name, font weight, and which text should have that font styling)

Thanks!

#5

Bah! Sorry, I updated the URL.

I’m looking to use a Google Font: Nunito Sans, with Headings at 200 and 900, body text at 400, bold text at 800. Curiously, this font loads in the Templates interface in Pro but does not load in Appearance>Customize>Typography.

#6

Hi there,

Upon checking, it’s related to this issue https://theme.co/apex/forum/t/font-weights-dont-seem-to-load-import/2604/13

In which our developers are already working on, please stay tuned from the updates :slight_smile:

Thanks.

#7

So, meanwhile, should I just apply a band-aid solution?

For example:

 @import url('https://fonts.googleapis.com/css?family=NunitoSans:200,200i,400,400i,800,800i,900,900i');

When can we expect a permanent fix for this issue?

#8

So I added the @import code and that has resolved the issue with body text.

However, h1 h2 h3, etc., are not responding to any css in any of the custom CSS areas anywhere in the theme.
Please advise on how I can manually control the styling of the headings.

#9

Hi,

I checked and it seems to be working fine on my end.

Try to clear your browser cache and check again.

Thanks

#10

Yes, that does show up in Inspect.

However, adding (for example) h1 {font-size: 5em;} to custom css areas does nothing to affect the heading.

#11

Hi there,

It’s because of the class name, any CSS applied directly to that element will be overridden by the CSS carried by the class name. Example,

<h1>Your CSS will work here</h1>

<h1 class="h1">but not here</h1>

You have this CSS

h1 {
  font-weight: 200;
  font-size: 10em;
}

But there are existing CSS applied to class .h1, like this

h1, .h1 {
    margin-top: 1em;
    font-size: 400%;
    line-height: 1.1;
}

Hence, it will apply the CSS from .h1 instead of h1. And since you’re using custom headlines, it will surely use classes. And to fix that, you should change your CSS to this

h1, .h1 {
  font-weight: 200;
  font-size: 10em;
}

Overriding both h1 and .h1.

Hope this helps.

#12

That’s the answer I was actually looking for. Thank you!

#13

You’re most welcome!