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...