As I mention in the 7.7 release post, the addition of system fonts did not include the font weight options. This is just a quick post to give you the styles for the font weights. Just add these classes to the element you are adding and CSS should take care of the rest. If you run into any problems, please let me know.
UPDATE: In addition to the CSS below, in the typography settings I recommend some negative letter spacing. For me, -.03em is best for h1 and -.02em for other headings.
:root{
--900:900;
--800:800;
--700:700;
--600:600;
--500:500;
--400:400;
--300:300;
--200:200;
--100:100;
}
/* Tag targeting */
.text--heavy :is(h1,h2,h3,h4,h5,h6,p,li,dd,dt,span,em){
font-weight:var(--900)!important;
}
.text--extrabold :is(h1,h2,h3,h4,h5,h6,p,li,dd,dt,span,em){
font-weight:var(--800)!important;
}
.text--bold :is(h1,h2,h3,h4,h5,h6,p,li,dd,dt,span,em){
font-weight:var(--700)!important;
}
.text--semibold :is(h1,h2,h3,h4,h5,h6,p,li,dd,dt,span,em){
font-weight:var(--600)!important;
}
.text--medium :is(h1,h2,h3,h4,h5,h6,p,li,dd,dt,span,em){
font-weight:var(--500)!important;
}
.text--regular :is(h1,h2,h3,h4,h5,h6,p,li,dd,dt,span,em){
font-weight:var(--400)!important;
}
.text--book :is(h1,h2,h3,h4,h5,h6,p,li,dd,dt,span,em){
font-weight:var(--300)!important;
}
.text--light :is(h1,h2,h3,h4,h5,h6,p,li,dd,dt,span,em){
font-weight:var(--200)!important;
}
.text--thin :is(h1,h2,h3,h4,h5,h6,p,li,dd,dt,span,em){
font-weight:var(--100)!important;
}
/* Alternative all encompassing */
.thin {
font-weight:var(--100)!important;
}
.light {
font-weight:var(--200)!important;
}
.book {
font-weight:var(--300)!important;
}
.normal {
font-weight:var(--400)!important;
}
.medium {
font-weight:var(--500)!important;
}
.semibold {
font-weight:var(--600)!important;
}
.bold {
font-weight:var(--700)!important;
}
.extrabold {
font-weight:var(--800)!important;
}
.heavy {
font-weight:var(--900)!important;
}Originally published on April 14, 2022
