Font loading technics

font-preloader.es6.js

fetch("https://fonts.googleapis.com/css?family=Roboto:300,400,400i,500&subset=cyrillic").then(data => data.text()).then(style => Promise.all(style.match(/(?:(?:https?:\/\/))[-a-zA-Z0-9@:%._\+~#=]{2,256}\.[a-z]{2,4}\b(?:[-a-zA-Z0-9@:%_\+.~#?&\/=]*(\.woff2))/gim).map(url => fetch(url)), () => {document.cookie="fonts=1;path=/;domain="+location.hostname+";"}))

FONTS.md

Loading fonts

font-display: optional;

DEPRICATED

if (getCookie('fonts') === 1) {
  printf('<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,400i,500&subset=cyrillic">')
} else {
  printf('<script>"use strict";fetch("https://fonts.googleapis.com/css?family=Roboto:300,400,400i,500&subset=cyrillic").then(function(a){return a.text()}).then(function(a){return Promise.all(a.match(/(?:(?:https?:\/\/))[-a-zA-Z0-9@:%._\+~#=]{2,256}\.[a-z]{2,4}\b(?:[-a-zA-Z0-9@:%_\+.~#?&\/=]*(\.woff2))/gim).map(function(b){return fetch(b)}),function(){document.cookie="fonts=1;path=/;domain="+location.hostname+";"})});</script>')
}

Inspired by https://css-tricks.com/preventing-the-performance-hit-from-custom-fonts/

---

• https://www.zachleat.com/web/23-minutes/