JSFiddle - React, Tailwind, and code Playground

by ecmanaut

HTML

<h1 class="supports">@supports supported: </h1>
<h1 class="woff">WOFF font support: </h1>

<p>As I read the specs, the above font test is syntactically legal - though it doesn't seem to actually <i>work</i>, for purposes of testing if a font format is supported or not. Or did I slip, somewhere?</p>

CSS

h1:after { content: "no"; }

@supports (display: block) {
  .supports:after { content: "yes"; }
}

@supports (@font-face { font-family: 'Bitter'; font-weight: 700; src: url(http://themes.googleusercontent.com/static/fonts/bitter/v4/evC1haE-MsorTl_A7_uSGbO3LdcAZYWl9Si6vvxL-qU.woff) format('woff'); }) {
  .woff:after { content: "yes"; }

  @font-face {
    font-family: 'Bitter';
    font-weight: 700;
    src: url(http://themes.googleusercontent.com/static/fonts/bitter/v4/evC1haE-MsorTl_A7_uSGbO3LdcAZYWl9Si6vvxL-qU.woff) format('woff');
  }

  .woff {
    font-face: Bitter;
    font-weight: bold;
  }
}

h1 { font-size: 20px; }
h1, p { margin: 1em; }