Compass Font Face

Provides a mixin to support @font-face. See CSS3 spec: @font-face.

This file can be imported using: @import "compass/css3/font-face"

View the Source for this module on Github.

Examples

Compass Font Face Example
How to use the @font-face mixin

Imports

The following sass files are automatically imported when you import this file:

  1. CSS3 Utilities

Mixins

View Source: Sass | SCSS 

=font-face($name, $font-files, $eot: false, $postscript: false, $style: false)
  @if $postscript or $style
    @warn "The $postscript and $style variables have been deprecated in favor of the Paul Irish smiley bulletproof technique."
  @font-face
    font-family: quote($name)
    @if $eot
      src: font-url($eot)
    src: local("☺"), $font-files

@mixin font-face($name, $font-files, $eot: false, $postscript: false, $style: false) {
  @if $postscript or $style {
    @warn "The $postscript and $style variables have been deprecated in favor of the Paul Irish smiley bulletproof technique."; }
  @font-face {
    font-family: quote($name);
    @if $eot {
      src: font-url($eot); }
    src: local("☺"), $font-files; } }

Cross-browser support for @font-face. Supports IE, Gecko, Webkit, Opera.

  • $name is required, arbitrary, and what you will use in font stacks.
  • $font-files is required using font-files(‘relative/location’, ‘format’). for best results use this order: woff, opentype/truetype, svg
  • $eot is required by IE, and is a relative location of the eot file.