Body font in pro - how does it all work together?

Support
#1

dear support,

after writing about my font problems in several threads i decided to open a new one dedicated only to this specific problem i am having in order to make things more transparent.

so. what i really want to understand is how the font settings in pro are supposed to be used to achieve a global font look for body and header text elements.

to make it more simple for now: i basically search for a setting/way to have the body font size and line spacing set globally and not! in every text element. i just can’t imagine that this is only possible with custom css and !important attributes…

i describe my approach anyways. maybe i do something wrong…

and i leave the customizer out of the equation for now. i set every font there to be a system font - just in case. but i hope it will not be necessary to touch otherwise.

so in pro in the “theme options -> typography” i select:

body font (from a font template) -> works
color (from a color template) -> works
font size (rem) -> does not work/have any effect
font weight-> does not work/have any effect
font italic -> does not work/have any effect

for the headers in the theme options only the color (template) settings work. all others not.

i use v2 elements without any changes in the default settings.

hope you can bing some light into the supposed interaction of the theme options and the element settings (untouched). i really need to figure this out soon. i spend 4 days now with constant tests and trial and error. i have to continue that project very soon!

if you want to have a look for yourself please have a look into the secure notes.

thanks a lot! kai

#2

Hello Kai,

First it is best to understand UNIT use: https://css-tricks.com/confused-rem-em/

Let’s say for a Headline element I got the following Settings:
Text Format Tab > Font Size :1 em
Setup Tab > Based Font : 1REM
ROOT FONT > 20px

The font size of your HEADLINE will be 20px. If we adjust Text Format Tab > Font Size: 1.5. The final font size of your headline will be 1.5 x 20px = 30px.

See this: https://screencast-o-matic.com/watch/cbXnQU2hrV

Font weight and font italic will only work if it’s available on the font you were using.

Hope this helps.

#3

@Lely thanks for your reply!
i must admit that i can’t really see how it connects to my basic question:

i basically search for a setting/way to have the body font size and line spacing set globally and not! in every text element. i just can’t imagine that this is only possible with custom css and !important attributes…

i do not have problems with font sizes but with the global (site wide) font size. there must be a way to set a global font size for example for body text and have that reflected in the (v2) text element. i can’t make that work, however hard i try and i really need an explanation very soon. i hope you understand me better now?
thanks, kai

ps: your video: i am working with “scaling” in the font settings of theme options. did you log into my site? i gave the credentials.

#4

Hi there,

That’s not possible with just a setting, it needs custom CSS. Body is just a root wrapper element, there are other elements with local styling and local styling is always prioritized than the global, unless you’ll override it with CSS.

Which is why we need to understand and be informed on which text you’re trying to change the size so we could see which selector and which styling needs the overriding.

As for body and headline, the font options are available under Typography, but please note that it can be overridden by the local styling of an element. Some of the local styling can be from the theme, plugins, or other customization.

Would you mind providing more information of what you need to change then I’ll provide recommendation :slight_smile:

Yes, to check it we need to log in and test it.

Thanks!

#5

hi rad, i am sorry but i seem not to be able to explain myself on that matter. i don’t know how else to describe it. i understand all that what you explain. but maybe pro does not work the way i think it should. and why should it… :wink:
ok.
you say that the local styling of an element overrides the theme typography settings. that is what makes sense so far. but what if i use that text element (old or new) just as it is. no changes in the settings. should the text inside not reflect the settings of the theme typography? that also would make sense and so it was before pro.

that of course calls for a clean way to set the theme typography. and that is confusing in pro since there are site wide settings in the customizer as well as in the builder (typography).

right now any changes in the theme typography -> body font do not change any of the text in the (default) text elements. font family, font weight or font size (rem) or italics. all this works only in the text elements settings.

does that make sense?

thanks again for your patience. kai

#6

Hi there,

Sorry for the confusion, but I’ll try my best explaining it :slight_smile:

but what if i use that text element (old or new) just as it is. no changes in the settings. should the text inside not reflect the settings of the theme typography?

Shortcodes have default attributes, even if you don’t choose font option, it will still use the default options for that element. Hence, they are independent of global font settings. But with the font-family option, you can just choose ‘inherit’ and it will apply the font-family from global settings.

Plus, if global font styling will be applied to all elements, then would you like to have all text rendered with the same size and weight? Example, a tag-line that is supposed to be small will be the same size as the normal text, the same as the logo, and the same as custom headlines rendering. Every element needs local styling for a reason :slight_smile:

Please use the global settings as fallback settings for elements that don’t have local styling :slight_smile:

Thanks!

#7

hi rad,
thanks for your explanation which i understand fully.
the flaw here is that there is no way to have the global font settings of size and weight inherited.
but the global font settings suggest that this is possible. why else can i set them there? but they won’t apply. whatever i try. not even in the text elements. old or new.
can you confirm this behaviour?
best regards, kai
ps: the font weight settings in “typography” still look funny (sometimes) after the latest theme update.

#8

Hi there,

Yes, for example, the Text element does not have the inherit option for weight and size. You will need to set it case by case.

Please consider that the Size and Weight or other typography options in the Typography sections are mostly for theme generated text and not the elements that you use directly in the Cornerstone. An element will use whatever you have in the options if it has the Inherit option. If not then you need to set it specifically for the element. I am sure our developer already explained that in details:

As you may already know a templating feature is under development for elements. That feature will help you, for example, to set proper styling and options that you want for a Text Element and save it as a template which you can then use wherever you want as a starting point in the Cornerstone. We already have an idea regarding the feature UI here:

Thank you.

#9

hi christopher, after all these conversations this is finally the whole point i was getting at and wanting it confirmed from theme.co. i just could not imagine that you would redesign the theme for such an unpractical behaviour! am i a webdesign dinosaur if i expect having site wide text fields which inherit at least font and font size from a central typography option? and also this would make editing and adding text for a customer (who of course does not and should not need to know about all these new settings) much much easier. this is how it has been with every system i ever used. starting in the old days with golive :wink: do you know what i mean? thanks a lot! kai

#10

Hi there,

I understand and we should consider all possible options. But for now since there are many users who are preferences are different, then it should be manually set for the case by case basis.

Or for now, force the global styling through CSS so it would ignore local styling of each element and text.

Thanks!

#11

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