Last Updated: February 25, 2016
·
32.55K
· magnetikonline

Easy embedding of web fonts using a SASS mixin

Part of my ever growing "Sass boilerplate" mixin/includes collection:

https://github.com/magnetikonline/sassboilerplate/blob/master/fontface.scss

Using it is easy..

@import 'fontface';
@include fontFace('MyFont','font/myfont');

Will import a new font named MyFont with the eot/woff/ttf/svg font files to be located/named as font/myfont.(eot|woff|ttf|svg).

3 Responses
Add your response

hi , can i add the include sentence in the fontface file and use it in my css file ?

over 1 year ago ·

Can you give an example?

over 1 year ago ·

@mixin fontFace($family,$src,$weight: normal,$style: normal) {
@font-face {
font-family: $family;
src: url('#{$src}.eot'); // IE9 compat
src: url('#{$src}.eot?#iefix') format('embedded-opentype'), // IE8 and below
url('#{$src}.woff') format('woff'), // standards
url('#{$src}.ttf') format('truetype'), // Safari, Android, iOS
url('#{$src}.svg##{$family}') format('svg'); // legacy iOS

    font-style: $style;
    font-weight: $weight;
}

}
@include fontFace('MyaFont','font/myafont');
@include fontFace('MybFont','font/mybfont');
mycss.file
@import 'fontface';
body{font-family:MyaFont;}
h1{font-family:MybFont;}

over 1 year ago ·