JSFiddle - React, Tailwind, and code Playground

by ainop

HTML

<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Lobster&amp;type=.css">
<p>All browsers besides IE11- show title in <span class="font-face">Lobster</span> typeface.</p>
<h1 id="rock-lobster">
    Rock Lobster!
    <label class="fix"><input type="checkbox" id="fix"/> fix</label>
</h1>
<p> IEs are ok with <span class="font-face">font-face</span>. They're relatively up to date, so they <span class="rem">understand rem</span>. But unfortunately they cannot into rem/vh values in font shorthand.</p>

CSS

body {
    font: italic 1em/1.6 'Georgia' serif;    
}

h1 {
    font: normal 3rem 'Lobster', fantasy;
}

.rem {
    font-size: 1.2rem;
}

.font-face {
    font-style: normal;
    font-family: 'Lobster';
}

.ie {
    font-style: normal;
    font-weight: normal;
    font-size: 3rem;
    font-family: 'Lobster', fantasy;
}

.fix {
    font-style: normal;
    font-weight: normal;
    font-size: 1rem;
    font-family: sans-serif;
}

JavaScript

var checkbox = document.getElementById('fix');
var heading = document.getElementById('rock-lobster');
checkbox.onchange = function () {
    heading.className = checkbox.checked ? 'ie' : '';
};