JSFiddle - React, Tailwind, and code Playground

by phloe

HTML

<h1>
/ Nyheder
</h1>
<h3>
Hello world
</h3>
<p>
  Webfonts load like a mother and it's getting really annoying.
</p>
<h4 class="light">
Hello world
</h4>

<button>Activate gibson</button>

<div class="preload">
  <p class="preload__gibsonLight"> </p>
  <p class="preload__gibsonRegular">preload__gibsonRegular</p>
  <p class="preload__gibsonSemiBold">preload__gibsonSemiBold</p>
  <p class="preload__gibsonBold">preload__gibsonBold</p>
</div>

CSS

@font-face {
  font-family: "preload__gibsonLight";
  src: url("//www.dr.dk/assets/fonts/gibson/light/gibson-light-webfont.eot");
  src: url("//www.dr.dk/assets/fonts/gibson/light/gibson-light-webfont.eot?#iefix") format("embedded-opentype"), url("//www.dr.dk/assets/fonts/gibson/light/gibson-light-webfont.woff2") format("woff2"), url("//www.dr.dk/assets/fonts/gibson/light/gibson-light-webfont.woff") format("woff"), url("//www.dr.dk/assets/fonts/gibson/light/gibson-light-webfont.ttf") format("truetype"), url("//www.dr.dk/assets/fonts/gibson/light/gibson-light-webfont.svg") format("svg");
  font-weight: normal
}

@font-face {
  font-family: "preload__gibsonRegular";
  src: url("//www.dr.dk/assets/fonts/gibson/regular/gibson-regular-webfont.eot");
  src: url("//www.dr.dk/assets/fonts/gibson/regular/gibson-regular-webfont.eot?#iefix") format("embedded-opentype"), url("//www.dr.dk/assets/fonts/gibson/regular/gibson-regular-webfont.woff2") format("woff2"), url("//www.dr.dk/assets/fonts/gibson/regular/gibson-regular-webfont.woff") format("woff"), url("//www.dr.dk/assets/fonts/gibson/regular/gibson-regular-webfont.ttf") format("truetype"), url("//www.dr.dk/assets/fonts/gibson/regular/gibson-regular-webfont.svg") format("svg");
  font-weight: normal
}

@font-face {
  font-family: "preload__gibsonSemiBold";
  src: url("//www.dr.dk/assets/fonts/gibson/semiBold/gibson-semiBold-webfont.eot");
  src: url("//www.dr.dk/assets/fonts/gibson/semiBold/gibson-semiBold-webfont.eot?#iefix") format("embedded-opentype"), url("//www.dr.dk/assets/fonts/gibson/semiBold/gibson-semiBold-webfont.woff2") format("woff2"), url("//www.dr.dk/assets/fonts/gibson/semiBold/gibson-semiBold-webfont.woff") format("woff"), url("//www.dr.dk/assets/fonts/gibson/semiBold/gibson-semiBold-webfont.ttf") format("truetype"), url("//www.dr.dk/assets/fonts/gibson/semiBold/gibson-semiBold-webfont.svg") format("svg");
  font-weight: normal
}

@font-face {
  font-family: "preload__gibsonBold";
  src:...

JavaScript

function hasPreloaded (family) {
  var styles = document.querySelectorAll("style");
  var length = styles.length;
  var index = 0;
  var reg = new RegExp("(\")preload__(" + family + ")");
  while (index < length) {
  	var style = styles[index++];
    if (style.textContent.match(reg)) {
			style.textContent = style.textContent.replace(reg, "$1$2");
    }
  }
}
var preload = document.querySelector(".preload");
var preloadElements = preload.querySelectorAll("p");
var length = preloadElements.length;
var index = 0;
while (index < length) {
	preloadElements[index++].addEventListener("scroll", function () {
  	hasPreloaded(this.className.replace(/preload__/, ""));
  });
}

var button = document.querySelector("button");
button.addEventListener("click", function () {
	["gibsonLight", "gibsonRegular", "gibsonSemiBold", "gibsonBold"].forEach(hasPreloaded);
})