If you need to apply a custom design to your headings and text, we’ve prepared a code snippet that allows you to individually adjust all values as needed.
You can configure each element separately (H1, H2, H3, H4, and regular text) - you’re not limited to a single control shared across all headings. Each heading can be customized individually.
With this code snippet you can edit:
- font size
- font weight
- font color
- letter spacing
- line height
- top and bottom margin
- Copy the code snippet below and paste it into the CSS tab of the custom code section in your dashboard.
- Then you can edit the values as you need.
Code snippet:
/* H1 heading style */
h1.notion-heading {
font-size: 30px;
font-weight: 600;
color: #37352F;
letter-spacing: 0px;
line-height: 1.3 !important;
margin-top: 20px !important;
margin-bottom: 0px;
}
/* H2 heading style */
h2.notion-heading {
font-size: 24px;
font-weight: 600;
color: #37352F;
letter-spacing: 0px;
line-height: 1.3 !important;
margin-top: 16px !important;
margin-bottom: 0px;
}
/* H3 heading style */
h3.notion-heading {
font-size: 20px;
font-weight: 600;
color: #37352F;
letter-spacing: 0px;
line-height: 1.3 !important;
margin-top: 12px !important;
margin-bottom: 0px;
}
/* H4 heading style */
h4.notion-heading {
font-size: 16px;
font-weight: 600;
color: #37352F;
letter-spacing: 0px;
line-height: 1.3 !important;
margin-top: 22px !important;
margin-bottom: 0px;
}
/* Common text style */
p.notion-text {
font-size: 16px;
font-weight: 400;
color: #37352F;
letter-spacing: 0px;
line-height: 1.5 !important;
margin-top: 0px !important;
margin-bottom: 0px;
}Default:
Edited example:
