See file itself.

markfont.scss

// Mockup of a mixin to usee along the Web Font Loader.

// Per font, you hardcode a mixin (can be optimized, go ahead!). In the mixin, the default font is something like Times or Arial. By fiddling a bit later on, you can determine the optical ratio between the rendered height of your font, and the fallback.

// Put that on the place of the 0.95.

// When the WFL finishes loading, it will set a class on the root element. Because you have selected a version of the font, for example a bold or italic one, you have to re-set all the font options related to that. Otherwise you will get a fake bold.

// So, while the font is loading (can take 2-5 seconds on slow, mobile connections, but also on desktop!) you will see the fallback font, instead of a void for all places your font is used.

// When the font is loaded, it will be displayed without vertically shifting the page that much, since the height of each line is practically the same.

// Good luck, Mark. (And all others willing to use it!)



@mixin markfont($size, $weight: normal, $style: normal, $variant: normal) {
  font: $weight $style $variant #{ $size * 0.95 } "Times New Roman", serif;

  .markfont-loaded & {
    font: normal normal normal $size "Mark his awesome typeface", serif;
  }
}

h1 {
  @include markfont(4em)
}