Skip to content

Instantly share code, notes, and snippets.

@WhatIsHeDoing
Created July 25, 2012 23:38
Show Gist options
  • Star 7 You must be signed in to star a gist
  • Fork 4 You must be signed in to fork a gist
  • Save WhatIsHeDoing/3179370 to your computer and use it in GitHub Desktop.
Save WhatIsHeDoing/3179370 to your computer and use it in GitHub Desktop.
Embedding and Using Custom Fonts with SASS
/*
* _mixins.scss
*/
$font_dir: '../fonts/';
/* _simple-font-url('Chunkfive', 'eot'); */
@function _simple-font-url($name, $extension)
{
@return url($font_dir + $name + '-webfont.' + $extension);
}
/* _full-font-url('Chunkfive', 'woff', 'embedded-opentype', '?#iefix'); */
@function _full-font-url($name, $extension, $format, $hash: '')
{
@return url($font_dir + $name + '/' + $name + '-webfont.' + $extension + $hash) format($format);
}
/* register-font('Chunkfive'); */
@mixin register-font($name)
{
@font-face {
font-family: $name;
font-style: normal;
font-weight: normal;
src: _simple-font-url($name, 'eot');
src: _full-font-url($name, 'woff', 'embedded-opentype', '?#iefix'),
_full-font-url($name, 'ttf', 'truetype'),
_full-font-url($name, 'svg', 'esvg', '?#' + $name);
}
}
/*
prevent faux bold
http://www.alistapart.com/articles/say-no-to-faux-bold/
use-registered-font('Chunkfive');
*/
@mixin use-registered-font($name)
{
font-family: $name, $sans-serif;
font-weight: normal;
letter-spacing: 0;
}
/*
* sample_usage.scss
*/
@import "_mixins";
@include register-font('Chunkfive');
#logo
{
@include use-registered-font('Chunkfive');
}
@bumlaser
Copy link

Thanks for this! :) Is "$sans-serif" a typo, or do you define that somewhere else?

@alex-zige
Copy link

Think thats the typo. should be deleted or predefined on the top.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment