Nested components and fallback fonts for web fonts

[doubleswirve]

Hello,

We're trying out font loading using the technique described in this article:

https://www.filamentgroup.com/lab/font-events.html

Basically, the html or body element gets a class applied to it after a JS library has determined that a web font has been loaded.

In our case, we're loading 2+ web fonts. For example:

/* This would work for something like the body element itself */
.site-root {
  & {
    font-family: serif;
  }

  &.-webfontloaded {
    font-family: 'Font A';
  }
}

/* Not sure about this */
.meta-data {
  & {
    font-family: sans-serif; /* Note: different than root element */
  }
}

.site-root.-webfontloaded {
  .meta-data {
    & {
      font-family: 'Font B';
    }
  }
}

In this example, I don't know the nesting relationship between .site-root/body and the .meta-data element so I don't think I can use >. With the above I'm receiving the following lint message:

Descendant combinator not allowed: '.webfonts-loaded .meta-data'   rscss/no-descendant-combinator
Invalid element name: '.meta-data'

Do you guys have any recommendations on how to structure this or any other font techniques that have worked for you? One thing I considered was keeping track of elements with web fonts different than the body and then applying a variant class to them in the JS.

Thanks!

[cronfy]

Well, when you write

.meta-data {
  & {
    font-family: sans-serif; /* Note: different than root element */
  }
}

it basically means

body {
    .meta-data {
      & {
        font-family: sans-serif; /* Note: different than root element */
      }
    }
}

So I don't see any violation if you use

body.-webfontloaded {
    .meta-data {
      & {
        font-family: 'Font B';
      }
    }
}

I think you just need to tune you linting rules to exclude case when descendant combinator is used after body (or .site-root if it is root element indeed).