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

person holding wand on top of bowlAvada Release Adds Wizardry
silver iMac, keyboard, and mouseA Customized Read More Link

Leave a Reply

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

RELATED ARTICLES

  • Read Customizing Post Pagination

    Customizing Post Pagination

    In this article, I show how CSS can be used to customize the Avada pagination element.

    February 20, 2023

  • Read Accordion Cards

    Accordion Cards

    Another custom accordion example using pseudo element.

    February 17, 2023

  • Read Moving away from builder settings

    Moving away from builder settings

    I am beginning to restructure my site to rely less and less on the Avada element settings in favor of site-wide styling.

    February 12, 2023

  • Read Horizontal Image Accordion

    Horizontal Image Accordion

    I just added a demo of an accordion-style image slider using nothing but Avada and some custom CSS.

    February 11, 2023

  • Read Styling the RankMath Sitemap

    Styling the RankMath Sitemap

    If you are a RankMath user, you may know that they recently introduced a feature that automatically generates an HTML version of the XML sitemap. This post is to share the CSS I am using to add some layout to an otherwise long list of links.

    December 11, 2022

  • Read Quick Tip: Faux Nested Columns

    Quick Tip: Faux Nested Columns

    Overcoming a shortcoming in Avada with some CSS.

    December 4, 2022