Demo: Compass Font Face Example

<div class='example'>
  <p>The Quick Brown Fox jumped over the lazy dog.</p>
</div>

.example
  %p The Quick Brown Fox jumped over the lazy dog.

@import "compass/css3";

@include font-face("Blooming Grove", font-files("examples/bgrove.ttf", "examples/bgrove.otf"));

.example {
  font-family: "Blooming Grove";
  font-size: 1.5em;
}

@import compass/css3

+font-face("Blooming Grove", font-files("examples/bgrove.ttf", "examples/bgrove.otf"))

.example
  font-family: "Blooming Grove"
  font-size: 1.5em

@font-face {
  font-family: "Blooming Grove";
  src: url('/fonts/examples/bgrove.ttf?1408149819') format('truetype'), url('/fonts/examples/bgrove.otf?1408149819') format('opentype');
}
.example {
  font-family: "Blooming Grove";
  font-size: 1.5em;
}