Sass mixin for implementing web fonts

To implement web fonts, we need to use the @font-face directive in our CSS… well, SCSS.

The @font-face declaration block looks like this in its vanilla CSS form:

@font-face {
    font-family: fontName;
    src: url('path/to/font.eot'); /*IE9 Compat Modes*/
    src: url('path/to/font.eot?#iefix') format('embedded-opentype'), /*IE6-IE8 */
        url('path/to/font.woff') format('woff'), /*Modern Browsers*/
        url('path/to/font.ttf') format('truetype'), /*Safari, Android, iOS*/
        url('path/to/font.svg#fontName') format('svg'); /*iOS devices*/
    font-weight: normal;
    font-style: normal;
}

Now, if you're using more than one style or font family, you need to repeat the whole @font-face declaration block for each font file. This is not very DRY (Don't Repeat Yourself).

Tip

Web fonts are expensive in terms of file size and server requests, so please use web fonts moderately. The more you use, the slower your website/web app will become.

Yes that's...