Load in fonts async

start with creating a seperate css file with font declarations:

@font-face {
    font-family: 'MyFont';
    src:    url('superawesomefont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
@font-face {
    font-family: 'MyFont';
    src:    url('superawesomefontBold.woff') format('woff');
    font-weight: bold;
    font-style: normal;

then add this to the bottom of body:

          WebFontConfig = {
            custom: {
              families: [
               urls: [

           (function(d) {
              var wf = d.createElement('script'), s = d.scripts[0];
              wf.src = 'https://ajax.googleapis.com/ajax/libs/webfont/1.6.16/webfont.js';
              s.parentNode.insertBefore(wf, s);

then simply in your css file
add seperate selectors with font declarations with the new custom font preceding with .wf-active

body {font-family: Verdana, Geneva, sans-serif;
.wf-active body {
  font-family: "MyFont", Verdana, Geneva, sans-serif;

Add your comment