A simple mix-in to handle `@font-face` loading.

README.md

LESS Mix-In for Web Fonts

This mix-in is a shortcut for the cumbersome @font-face declaration.

It assumes that all font files are stored in the same directory and share the same file name (e.g. font-name.eot, font-name.woff, etc.).

Usage

@font-face {
    .font-face(
        'Font Name',    // Font name as used in CSS
        'file-name',    // Font file name (without extension)
        normal,         // Font weight (default: normal)
        normal          // Font style (default: normal)
    );
}

h1 {
    font-family: 'Font Name', sans-serif;
}

Credits

Plugged together lovingly by Jason Lengstorf.

fonts.less

/*
 * LESS Mix-In for Rapid Webfont Includes
 * --------------------------------------------------------------------------
 * Plugged together lovingly by Jason Lengstorf (http://lengstorf.com)
 *****************************************************************************/

/* Relative path to where your font files are stored */
@fonts-dir: '../fonts/';


/*
 * League Gothic (https://www.theleagueofmoveabletype.com/league-gothic)
 *****************************************************************************/

/* Regular */
@font-face {
    .font-face(
        'League Gothic',
        'leaguegothic-regular-webfont'
    );
}

/* Italic */
@font-face {
    .font-face(
        'League Gothic',
        'leaguegothic-italic-webfont',
        normal,
        italic
    );
}

/*
 * Mix-In to Handle Font Loading
 *****************************************************************************/

.font-face( @font-name, @font-file-name, @font-weight: normal, @font-style: normal ) {
    font-family: @font-name;
    src: url('@{fonts-dir}@{font-file-name}.eot');
    src: url('@{fonts-dir}@{font-file-name}.eot?#iefix') format('embedded-opentype'),
         url('@{fonts-dir}@{font-file-name}.woff') format('woff'),
         url('@{fonts-dir}@{font-file-name}.ttf') format('truetype'),
         url('@{fonts-dir}@{font-file-name}.svg#@{font-file-name}') format('svg');
    font-weight: @font-weight;
    font-style: @font-style;
}