font-face

view source

Implement cross-browser @font-face with the greatest of ease.

use-name
scut-font-face
type
mixin only
arguments
  1. $font-family

    A name for the font.

  2. $file-path

    The relative path to the font's files, including the files' common path and name and excluding their extensions.

  3. $weight
    default
    normal

    A font-weight value. This argument is optional: you can just leave it out for your italic non-bold fonts. See the example below.

  4. $style
    default
    normal

    A font-style value.

  5. $formats
    default
    eot woff2 woff ttf svg

    The font formats that you would like to include (in case you don't have them all, or you want to thin out your code for modern browsers, or whatever your private reasons).

The method Scut uses is that advocated by CSS-Tricks and used by Font Squirrel (see references). It solves all kinds of cross-browser issues going all the way back to IE6.

For example, to implement all varieties of Arvo:

@include scut-font-face("Arvo", "fonts/arvo-regular-webfont");
@include scut-font-face("Arvo", "fonts/arvo-bold-webfont", bold);
@include scut-font-face("Arvo", "fonts/arvo-italic-webfont", italic);
// or @include scut-font-face("Arvo", "fonts/arvo-italic-webfont", normal, italic);
@include scut-font-face("Arvo", "fonts/arvo-bolditalic-webfont", bold, italic);

If, for whatever reason, you do not want to include all of the default formats that are required for the far-far-back cross-browser compatibility (eot, woff2, woff, ttf, and svg), then include your own $formats list, e.g.:

@include scut-font-face("Arvo", "fonts/arvo-regular-webfont", $formats: woff ttf);

If you have a font but don't have all the varieties, try Font Squirrel's Webfont Generator.