By Stephen Walker

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.

Screenshot showing the text--bold class assigned to the text element and the effect on the text - text is now bold.
Class assigned to the text element

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

share the article

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

RELATED ARTICLES

  • Customizing the Off Canvas Background

    Styling the off-canvas element is "easy" if you know which part to target.

  • Customizing Toggle (Accordion) Headings

    In a recent project and for this site's new menu, I needed to change the default of the toggle heading and place the icon on the right side but not pushed the full width of the toggle panel. Fortunately, this is easy to do with a couple of lines of CSS.

  • Buttons, buttons, and more buttons

    One of the best things about Avada is the flexibility to create custom variations of elements and save them to the library for later use.

  • List of Links

    I am working on a new project and recently discovered some great CSS features --- text-underline-position and text-decoration-thickness.

  • Border between columns

    Since Avada currently does not have border settings for small and medium screens, this was our workaround

  • Test Layout – The Becker

    Trying to duplicate the basic look and feel of Dirk Beckers' website using Avada.