Skip to content

Instantly share code, notes, and snippets.

@WhatIsHeDoing
Created July 25, 2012 23:38
Show Gist options
  • 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');
}
@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