Reference Documentation

Demo: Compass Font Face Example

The Quick Brown Fox jumped over the lazy dog.

html haml 
<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.
scss sass css 
@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') format('truetype'), url('/fonts/examples/bgrove.otf') format('opentype')}.example{font-family:"Blooming Grove";font-size:1.5em}