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).
Written by Peter Mescalchin
Related protips
3 Responses
hi , can i add the include sentence in the fontface file and use it in my css file ?
Can you give an example?
@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;}
Have a fresh tip? Share with Coderwall community!
