<div class='example'>
  <h1>The Quick Brown Fox</h1>
  <p>Jumped over the log.</p>
</div>

.example
  %h1 The Quick Brown Fox
  %p Jumped over the log.

@import "https://compass-style.org/files/docs/examples/compass/css3/compass/css3";
@include font-face("Blooming Grove", font-files("examples/bgrove.ttf", truetype, "examples/bgrove.otf", opentype));
.example {
  font-family: "Blooming Grove";
  padding: 1em; }

@import https://compass-style.org/files/docs/examples/compass/css3/compass/css3
+font-face("Blooming Grove", font-files("examples/bgrove.ttf", truetype, "examples/bgrove.otf", opentype))
.example
  font-family: "Blooming Grove"
  padding: 1em

@charset "UTF-8";
@font-face {
  font-family: "Blooming Grove";
  src: local("☺"), url('https://compass-style.org/files/docs/fonts/examples/bgrove.ttf') format('truetype'), url('../../../../../docs/fonts/examples/bgrove.otf') format('opentype');
}
.example {
  font-family: "Blooming Grove";
  padding: 1em;
}