Headlines & Font Questions

Support
#1

Hello, a few questions regarding headlines and fonts…

I have been using the X theme for many years now. A while back, I was given the code below to adjust my header sizes. Question 1: Has this now been made available under Root Font Size, a little unsure of what Root Font Size does, as I don’t see much of a change when using it?
Question 2: When adjusting my font types, my current font for headers is Cinzel and my current font for the body text is Lato, however if you look at the home page under the very first text section, the header is displaying as Lato. When changing these two font types around, I noticed that it was a little glitchy and if I changed the body font it would change both the wording in the header and footer. Your first notion would be to think that the header and footer are possibly both text modules, but one is truly a header module and one is truly a text module. Then, trying it out now, the font is changing at all and just remains on Lato in the corestone editor.

I appreciate your help in advance!

/Header Sizes/
h1, .h1 { font-size: 24px !important; }
h2, .h2 { font-size: 24px !important; }
h3, .h3 { font-size: 22px !important; }
h4, .h4 { font-size: 14px !important; }
h5, .h5 { font-size: 10px !important; }

#2

Hi Samantha,

Thanks for reaching out.

  1. The CSS should still work, but it’s recommended to use the root font size as this is where other font sizes respond.

Example, let’s say you have root font size of 10px, then on the headline, you apply 3rem font size. Then it would appear as 30px. With this, all other font sizes could respond to it. While the CSS you have applied is fixed value with no relation to root font size which still works okay.

  1. Your headline and text font are set to inherit, which will then inherit the font of which ever font is applied to the parent container or the body. Please check this

The builder element has its own local font setting which default to inherit, but you can still change it. The global font setting set in Typography is useful for contents not created with the builder (like a fallback font configuration).

Thanks!

#3

For item 2 - Reading through your response for item 2, I am a little confused. Wouldn’t the inherit function (since it is the default) go off of global settings? When I changed the font for the headline to be “Headlines”, nothing changed but the headings format is set to Cinzel in my x themes customizer for the overall site?

For item 1 - Also, to confirm, which root font size is equivalent to H1, H2, H3, etc?

#4

Hi Samantha,

I have investigated the issue and yeah this seems to be a drawback on v2 headline element if it set to inherit, what is happening is, the parent div of the h1 is set to be lato (from the body font), so that is the font being inherited.

Two things you can do to resolve this, either set your Headline’s font-family to Headings (I see that this was set as Cinzel on Font Manager,) so that should give your headline the Cinzel font.

Or add this to Theme Options > CSS

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
	font-family: "Cinzel",serif !important;
}

This will make sure all your headlines will use the Cinzel font (given that your site is loading it).

The answer is none, Root Font Size is not Headline font size, please read the explanation here what is a Root font size is.

With this on your custom CSS

/*Header Sizes*/
h1, .h1 { font-size: 24px !important; }
h2, .h2 { font-size: 24px !important; }
h3, .h3 { font-size: 22px !important; }
h4, .h4 { font-size: 14px !important; }
h5, .h5 { font-size: 10px !important; }

None of the font-size options will work on your headlines.

What is CSS !important

Hope this shed some lights,
Cheers!

#5

I would like to avoid adding more code - less code the better. Can you see why Cinzel is not showing correctly when it is set as the headline font? Including secure note

#6

Hi,

Can you provide us more details on what you mean by not showing correctly.

I tried it and it seems to work.

Thanks

#7

Hello - I just changed the title to not be inherit and it worked, but when it is inherit it doesn’t work

#8

Hey Samantha,

It’s because the Font Manager will only load the font when it’s actually used. Since inherit gets “inherits” the font from Theme Options and Cinzel was not set or used in there, it isn’t loaded.

With that said, you really need to set the Font Family to a font you’ve setup in the Font Manager.

Thanks.

#9

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