I am using the Font Manager as set in Typography.
I set the Body and Content font and Heading font in the Font Manager settings.
So now in layout builder shouldn’t text set to Inherit and headings set to inherit respect the Font Manager settings?
It is not working that way.
I have to manually set each new element to Body or Heading.
This seems counterintuitive since I set them in the Font Manager.
Hey @mikewolf1127,
Inherit gets the Theme Options > Typography settings and not the Font Manager. The Font Manager is just for font setup.
Assign the Body font or any font set in the Font Manager to the Body and Content font setting. Do the same for the Headings font.
Hope that helps.
Yes, I understand that. That is the way I have it set up. In Typography. Right under the Font Manager switch.
In the Font Manager I have the ‘Headings’ font set to Bodoni…
In the Theme Options>Typography settings I have the I have the Headings Font Family set to the ‘Headings’ font from the Font Manager…
But when I add a Headline Element, and the Text Format>Font Family is set to Inherit, it is not picking up the ‘Headings’ font, Bodoni…
Until I manually set the Text Format>Font Family to ‘Headings’…
But it should “inherit” the Headings Font Family as set in Typography when set to the default setting Inherit, correct?
Hello @mikewolf1127,
You must have misunderstood the inherit property value in the element. Please be advised that it does not inherit the font family of the heading from the Typography. It actually inherits the font family of the parent element. Please check out this documentation:
You must assign the font family to each of your headline elements and do not rely on the inherit value.
Best Regards,.
Oh. Then…
1 - Where is the font family of the parent element set for items added to a new blank page?
2 - What is the point of the ‘Body and Content’ and ‘Headings’ settings in Typography settings? If I am setting the Font Family of Text and Headline elements to specific fonts delineated in the Font Manager, what are the settings in Typography doing?
Hello @mikewolf1127,
1.) The parent element of the headline element is the container element. If the parent does not have a font-family setting, the inherit property will look up to the great great great grandparent which is the body element.
2.) The “Body and Content” and “Headings” in the Typography settings are used globally on your site. The topbar content and the footer contents will be using typography settings. And also, not all X/Pro theme users prefer to edit the posts using Cornerstone or Pro Editor. When they use the WP Editor to edit their posts (pages), the typography global settings will be applied. In your case, you use the Cornerstone or Pro Editor to create your own custom page design layout have more control over the elements on the page. Having to select the font family is one of those element controls.
Hope this makes sense.
OK, so the topbar and the footer, plus the WP Editor, respect the Typography settings. Got that. So then…
1 - In my case, the container of the Headline is the Column, which does not have a font-family setting.
And the container of the Column is the Row, again, no font-family setting.
And the container of the Row is the Section, again, no font-family setting.
So…
As you say, it then goes all the way up to the tag, correct?
And the tag is set by the Typography settings, correct?
So, when there aren’t any parent containers dictating the font-family, shouldn’t Inherit give the Headline the font-family set in the Typography settings for Headers? And, following, a Text element the font-family set in the Typography settings for Body and Content?
Howdy, @mikewolf1127! Thanks for writing in with some good questions regarding fonts, here’s a couple things to be aware of when managing typography on your site:
Firstly, there are a couple different contexts you need to be thinking in. There are Global settings for HTML elements and things that are outside the scope of the Builders, and then there are your Element-level settings as you work with our Element library directly in a builder. When X (and Pro to some extent) first came on the scene, almost everything was styled from a global, top-down approach, as there was not much in the way of a “Builder” when we first launched. The typography settings in the Theme Options panel will target things such as the headlines used in default Stack page / post templates, or the copy used throughout those pieces. With the v1 Elements from way back in the day, the headlines or body copy used in any of these Elements would automatically get these Global settings because there was no real control over to adjust them. With the v2 Elements, you can overwrite things on a per-Element basis, which gives more flexibility, and also means that you must manage them more explicitly to some extent.
Second, as @ruenel mentioned, inherit will take on the property set by the parent tag. But each tag can only have on font-family value set. The base level CSS in the theme is applied something like this pseudo-code:
html {
font-family: {{Body Copy Font Family}}
}
h1, h2, h3, h4, h5, h6 {
font-family: {{Headlines Font Family}}
}
So when you add a Headline Element and leave the default as inherit, it is going to have the h1, h2, et cetera inherit all the way up to the Body Copy font-family as that is what is output at the most base level on the <html> element in your markup. At no point is your headline in another headline (which would be invalid anyway), so it’s not inheritint from a Headline, it’s inheriting from the base HTML.
This is not a mistake and is by design, as it’s simply how CSS must get applied. We use inherit as the default on all v2 Elements because every user’s install is different, and we can’t assume what font-family a user wishes to use as their default, and a great deal of users will often utilize one font-family for both Headings and Body Copy, making this not as visible of thing to be aware of.
Irregardless, we always recommend users hard set a Font Group setup from the Font Manager for all v2 Elements. Why? Because that will give you the most control to change things easily down the road. If you want to change all your Headings everywhere to a completely different font, leveraging the Font Groups is exactly what that was intended for.
The TL;DR of everything is that the Theme Options typography settings are meant for targeting Elements outside of the scope of a particular Builder, and then we recommend always hard-assigning a Font Group from the Font Manager when adding any new Element to your page. This keeps styling consistent and predictable across the board. Once you’ve added one Headline Element to a new page and tweaked this value, you can always duplicate it to easily setup your next use-case without having to re-assign the Font Family. Another option would be to assign a new Preset where you set the Font Family and Font Weight how you want and then save that as “My Headline” or whatever you want to name it, and then every time you drag in that Preset, those settings will already be in place for you. There are many different workflows to eliminate the need for assigning this each time like this.
If you are only using one font-family for your entire site, then the inherit option is fine as it will just take on the font-family used everywhere, and your font-weight is the only thing you must set.
Hopefully this helps to shed some light on things. Cheers!
Did you read the whole thread? I think different people chiming adds confusion.
I know Inherit means inherit from the parents element font-family. I never thought Inherit meant from another Heading. That doesn’t make sense.
The ONLY thing I am asking is…
Why, when I add a new Headline element, it does not pick up the font-family set in Typography>Headings? Why do I have to manually change it from Inherit? Shouldn’t a Headline set to Inherit pick up the font-family set in Headlines in the Typography>Headings settings?
See the pictures above…
Hey @mikewolf1127,
We’re sorry for the confusion. I see the issue now.
My previous reply still applies except for the Headings. The Headline element will inherit the Body and Copy for now.
I’ll just clear up what Ruenel said that the Inherit option does not take the font set in Typography. It’s correct that the Inherit option will “inherit” properties from the parent element. What I said though is the bigger picture. In the end, elements will inherit the Body and Copy font as that’s the only “parent” you can set the font family.
I’m sorry I forgot that the generated styles are being applied directly to the tag set in the Headline element.
If it was applied to the <span> tag, what I said previously would work. I’ll take this to our development team but we can’t promise this will be changed.
With that said, what I’d now recommend is you set up Element Defaults. Create a Headline element default. In the default, set the Font Family already.
Hope that helps now.
OK. I see.
Well it would make total sense to have the Typography settings inform the Inherit setting. So that you set the Headings font in the Typography settings, and then any new Headline element you add has the Headings font.
Seems straightforward and intuitive.
1 Like
Thanks for your feedback, Mike.
This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.