async font load

_body.scss

body {
  @include sans-serif();
  ...
}

_fonts.scss

@font-face{
  font-family:"Neuzeit S LT W01 Book";
  src:url("/fonts/840b8bdf-7d26-449a-9620-8cb6663f18cc.eot?#iefix");
  src:url("/fonts/840b8bdf-7d26-449a-9620-8cb6663f18cc.eot?#iefix") format("eot"),url("/fonts/77aaeb7b-86f4-47a1-8196-74a660dd0919.woff") format("woff"),url("/fonts/efdf74e6-bfd4-466d-93fd-4f8f4d55b80c.ttf") format("truetype"),url("/fonts/be8d3917-a4cf-4d8f-b767-4e84bcbe300c.svg#be8d3917-a4cf-4d8f-b767-4e84bcbe300c") format("svg");
}
@font-face{
  font-family:"NeuzeitSLTW01-BookHeavy";
  src:url("/fonts/74c31844-4217-4fe8-82f7-88a5075de2e8.eot?#iefix");
  src:url("/fonts/74c31844-4217-4fe8-82f7-88a5075de2e8.eot?#iefix") format("eot"),url("/fonts/a1476bae-b118-4e9d-b711-c84091d9bc16.woff") format("woff"),url("/fonts/096111d9-3ba2-4828-ae9a-29fb4e03c0b1.ttf") format("truetype"),url("/fonts/74a8e701-bffc-464e-a60b-63169debd492.svg#74a8e701-bffc-464e-a60b-63169debd492") format("svg");
}
@font-face{
  font-family:"Garamond Prmr W01 Md";
  src:url("/fonts/ea2d1bca-c869-478c-a9e7-8b63efc999d1.eot?#iefix");
  src:url("/fonts/ea2d1bca-c869-478c-a9e7-8b63efc999d1.eot?#iefix") format("eot"),url("/fonts/90bc5e53-2291-4e21-aee8-8cc86de88c5c.woff") format("woff"),url("/fonts/a8981f22-5d12-4e0f-8f90-68aca46beb79.ttf") format("truetype"),url("/fonts/52d2afe4-7fc2-421f-9b36-cbd9da1a9fc6.svg#52d2afe4-7fc2-421f-9b36-cbd9da1a9fc6") format("svg");
}
@font-face{
  font-family:"Garamond Prmr W01 Md It";
  src:url("/fonts/e0c7de1e-50b6-47e1-80b6-931557d1097e.eot?#iefix");
  src:url("/fonts/e0c7de1e-50b6-47e1-80b6-931557d1097e.eot?#iefix") format("eot"),url("/fonts/6782c7ba-14a4-42b6-9d4e-5e8d514e1de2.woff") format("woff"),url("/fonts/3cead2ae-6b7d-4aa2-8d20-17e717291a62.ttf") format("truetype"),url("/fonts/df988b9d-de74-4a9d-8e4c-a1c6c93c0b9c.svg#df988b9d-de74-4a9d-8e4c-a1c6c93c0b9c") format("svg");
}

/* ####################################################
 * Site font stacks
*/

$sans-serif: sans-serif;
$sans-serif--strong: sans-serif;
$serif: serif;
$serif-em: serif;

$sans-serif--loaded: 'Neuzeit S LT W01 Book', sans-serif;
$sans-serif--strong--loaded: 'NeuzeitSLTW01-BookHeavy', sans-serif;
$serif--loaded: 'Garamond Prmr W01 Md', serif;
$serif--em--loaded: 'Garamond Prmr W01 Md It', serif;

/* ####################################################
 * Font setup mixins
*/

@mixin sans-serif($font-size:15, $line-height:25) {
  font-family: $sans-serif;
  font-size: $font-size * 1px;
  line-height: $line-height * 1px;
  font-weight: normal;
  .js-neuzeit-loaded & {
    font-family: $sans-serif--loaded;
  }
}
@mixin sans-serif--strong($font-size:15, $line-height:25) {
  font-family: $sans-serif--strong;
  font-size: $font-size * 1px;
  line-height: $line-height * 1px;
  font-weight: normal;
  .js-neuzeit-loaded & {
    font-family: $sans-serif--strong--loaded;
  }
}
@mixin serif($font-size:15, $line-height:25) {
  font-family: $serif;
  font-size: $font-size * 1px;
  line-height: $line-height * 1px;
  font-weight: normal;
  .js-garamond-loaded & {
    font-family: $serif--loaded;
  }
}
@mixin serif--em($font-size:15, $line-height:25) {
  font-family: $serif--em;
  font-size: $font-size * 1px;
  line-height: $line-height * 1px;
  font-weight: normal;
  .js-garamond-loaded & {
    font-family: $serif--em--loaded;
  }
}

A17.Helpers.font_observers.js

A17.Helpers.font_observers = function() {

  /*

    # A17.Helpers.font_observers
    * v.1

    ## description
    Adds a class to the document when fonts have loaded

    ## requires
    * fontfaceonload v0.1.6 https://github.com/zachleat/fontfaceonload

    ## parameters
    * none

    ## returns
    * nothing

    ## example usage:
    ```js
    A17.Helpers.font_observers();
    ```
  */
  var i, font;
  var neuzeit = [
    {
      name: "Neuzeit S LT W01 Book"
    },
    {
      name: "NeuzeitSLTW01-BookHeavy"
    }
  ];
  var garamond = [
    {
      name: "Garamond Prmr W01 Md"
    },
    {
      name: "Garamond Prmr W01 Md It"
    }
  ];
  // a counter
  var neuzeit_counter = 0;
  var garamond_counter = 0;
  // cookie name
  var neuzeit_cookie_name = "MO_fonts_cookie_neuzeit";
  var garamond_cookie_name = "MO_fonts_cookie_garamond";
  // check we have cookie of fonts already loaded or not
  var neuzeit_cookie = A17.Helpers.cookie_read(neuzeit_cookie_name) || "";
  var garamond_cookie = A17.Helpers.cookie_read(garamond_cookie_name) || "";
  // when a font is determined to be loaded
  function neuzeit_loaded() {
    // increment counter
    neuzeit_counter++;
    // if we reached the total
    if (neuzeit_counter >= neuzeit.length) {
      // add class
      $("html").addClass("js-neuzeit-loaded");
      // write cookie
      A17.Helpers.cookie_create(neuzeit_cookie_name,neuzeit.length,1);
    }
  }
  function garamond_loaded() {
    // increment counter
    garamond_counter++;
    // if we reached the total
    if (garamond_counter >= garamond.length) {
      // add class
      $("html").addClass("js-garamond-loaded");
      // write cookie
      A17.Helpers.cookie_create(garamond_cookie_name,garamond.length,1);
    }
  }
  // if cookie, show fonts (not first page load)
  if (neuzeit_cookie && neuzeit_cookie === neuzeit.length.toString()) {
    neuzeit_counter = neuzeit_cookie;
    neuzeit_loaded();
  } else {
    // go check on those fonts, using fontfaceonload https://github.com/zachleat/fontfaceonload
    for (i = 0; i < neuzeit.length; i++) {
      font = neuzeit[i];
      FontFaceOnload(font.name, {
        success: neuzeit_loaded,
        error: neuzeit_loaded,
        timeout: 3000
      });
    }
  }
  if (garamond_cookie && garamond_cookie === garamond.length.toString()) {
    garamond_counter = garamond_cookie;
    garamond_loaded();
  } else {
    // go check on those fonts, using fontfaceonload https://github.com/zachleat/fontfaceonload
    for (i = 0; i < garamond.length; i++) {
      font = garamond[i];
      FontFaceOnload(font.name, {
        success: garamond_loaded,
        error: garamond_loaded,
        timeout: 3000
      });
    }
  }
};

application.js

A17.onReady = function(){
  A17.Helpers.font_observers();
  ...
};

document.addEventListener('DOMContentLoaded', function(){
  A17.onReady();
});