In stead of using the limited Divi build-in font size settings, you can specify them with CSS in the theme options. Mainly useful for Divi 4, since Divi 5 supports clamp() and variables for all heading sizes. But even with Divi 5, there is no control on the header font sizes in the rich text editor of composed modules like blurbs, accordions, toggles and call to actions.
Use the following CSS. Note that !important is needed to ensure Divi does not overrule the settings. Downside is that you can’t overrule this css on individual elements anymore.
/* START define font sizes */
:root {
--base-font-size: clamp(1.125rem, 0.327vw + 1.048rem, 1.375rem);
--base-line-height: 1.3em;
}
body.et-fb .et_builder_inner_content body,
body.et-fb .et_builder_inner_content h6 {
font-size: var(--base-font-size);
line-height: var(--base-line-height) !important;
}
body.et-fb .et_builder_inner_content h5 {
font-size: calc(var(--base-font-size) * 1.1) !important;
line-height: var(--base-line-height);
}
body.et-fb .et_builder_inner_content h4 {
font-size: calc(var(--base-font-size) * 1.15) !important;
line-height: var(--base-line-height);
}
body.et-fb .et_builder_inner_content h3 {
font-size: calc(var(--base-font-size) * 1.2) !important;
line-height: var(--base-line-height);
}
body.et-fb .et_builder_inner_content h2,
.et_pb_wc_related_products_0_tb_body section.products>h2{
font-size: calc(var(--base-font-size) * 2.1) !important;
line-height: var(--base-line-height);
}
body.et-fb .et_builder_inner_content h1 {
font-size: calc(var(--base-font-size) * 2.7) !important;
line-height: var(--base-line-height);
}
body.et-fb .et_builder_inner_content .et_pb_fullwidth_header_subhead {
font-size: calc(var(--base-font-size) * 1.1) !important;
line-height: var(--base-line-height);
}
body.et-fb .et_builder_inner_content ol {
list-style-position: outside !important;
padding: 0 0 23px 1em !important;
}
/* END define font sizes */
Code language: CSS (css)
The css snippet example from below is added to prevent these font sizes also being used in the WP Backend and when you try load content from the library, import, export, etc.
body.et-fb .et_builder_inner_content h1 {
...
}
This one was also tested, but it doesn’t work when you try load content from the library, import, export, etc.
body:not(.wp-admin) h1 {
...
}