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"

Examples

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

Imports

Shared Utilities

Mixins

view source

font-face($name, $font-files, $eot, $weight, $style)

=font-face($name, $font-files, $eot: false, $weight: false, $style: false)
  $iefont: unquote("#{$eot}?#iefix")
  @font-face
    font-family: quote($name)
    @if $eot
      src: font-url($eot)
      $font-files: font-url($iefont) unquote("format('eot')"), $font-files
    src: $font-files
    @if $weight
      font-weight: $weight
    @if $style
      font-style: $style

@mixin font-face($name, $font-files, $eot: false, $weight: false, $style: false) {
  $iefont: unquote("#{$eot}?#iefix");
  @font-face {
    font-family: quote($name);
    @if $eot {
      src: font-url($eot);
      $font-files: font-url($iefont) unquote("format('eot')"), $font-files;
    }
    src: $font-files;
    @if $weight {
      font-weight: $weight;
    }
    @if $style {
      font-style: $style;
    }
  }
}

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.
$weight shows if the font is bold, defaults to normal
$style defaults to normal, might be also italic
For android 2.2 Compatiblity, please ensure that your web page has a meta viewport tag.
To support iOS < 4.2, an SVG file must be provided

If you need to generate other formats check out the Font Squirrel font generator

In order to refer to a specific style of the font in your stylesheets as e.g. "font-style: italic;", you may add a couple of @font-face includes containing the respective font files for each style and specying respective the $style parameter. Order of the includes matters, and it is: normal, bold, italic, bold+italic.