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;
}
[/css]


then add this to the bottom of body:

        <script>
          WebFontConfig = {
            custom: {
              families: [
                 'MyFont:normal',
                 'MyFont:bold'
               ],
               urls: [
                 'fonts.css'
             ]
           }
          };

           (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);
           })(document);
        </script>

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;
}