Can not change Page Title Font (has gigantic-font-size)

Thanks for the reply, it solves half my problem though. This block does not seem to be a block on subsequent pages. See the Test page snip below.

url here: https://www.euclidprobe.com/test/

This issue exists on ALL my pages. If I start a ‘new page’ the font used in this block is gigantic.

How do I set this globally so it defaults to a smaller font?

View post on imgur.com

• This reply was modified 3 years, 6 months ago by diopants.
• This reply was modified 3 years, 6 months ago by diopants.

On the “Test” page you mention, the size of the title there is dictated by the “Customizer – Content Options – Page Title Font Size” because on all pages except the home page the title of the page is shown in the page header (on this theme).

Currently the “Customizer – Content Options – Page Title Font Size” option is not reflected in the size of the font in the editor when editing a page.

Oliver

Oliver-

I thought I tried that. I tried to show it in this picture-

View post on imgur.com

There is NO effect by changing the slider for Page Title Font Size or Title Font Weight when using the customizer.

OR

Are you saying that this slider has no effect on the text field I am looking at on the ‘Home Page’ because it is not Page Title ?

EDIT: Where am I able to adjust the sizes for the rest of the font height assignments? Do I do it manually in the style.css or is it burried somewhere else?

• This reply was modified 3 years, 6 months ago by diopants.

Well spotted! We’ve taken a look and can replicate this issue. Looks like the Blog page uses a different class for page titles than other pages!

We’ll get that sorted in the next update of the plugin. In the meantime, add this to your “Customizer – Additional CSS” …

.page-title {
font-size: 2rem;
}

Oliver

Oliver-

Thanks for your patience.

The other parts I am trying to adjust are the sizes of the Header assignments. H1, H2, H3, …

I can not find any Customizer Option to adjust the font height or weight globally.

Do we edit those manually in the style.css ? Somewhere else?

thanks in advance.
dp

@artistnapa This is the CSS that is currently setting the size of the title on your own Blog page …

.page-title {
font-size: var(--global--font-size-page-title);
}

… so the CSS I gave before will definitely override that. If you want to target specifically the Blog page only then you could use this …

.blog .page-title {
font-size: 2rem;
}

… but your post suggested that you wanted all page titles to be included.

Oliver

@diopants The generic font height and weight of H1 / H2 / … tags are set by the theme in the style.css as follows …

h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 {
font-weight: var(--heading--font-weight);
}
h1, .h1 {
font-size: var(--heading--font-size-h1);
}
h2, .h2 {
font-size: var(--heading--font-size-h2);
}

So you can use, for example, this CSS to override the h2 styles on the front end …

h2, .h2 {
font-weight: bold;
font-size: 2rem;
}

… or …

:root {
--heading--font-weight: bold;
--heading--font-size-h2: 2rem;
}

… if you wanted to continue to use the CSS variables (which are not compatible with older browsers).

But … you should note that this will not change the size of the elements in the editor. At the moment, in order to do that you would need to modify the style-editor.css theme file … which you should do using a child theme if you absolutely feel that you must.

Oliver