sample with pictos

_typefaces.scss

// import a sans and serif from google apis
@import url('http://fonts.googleapis.com/css?family=Crimson+Text:400italic,600,700,700italic,600italic');
@import url(http://fonts.googleapis.com/css?family=PT+Sans:400,700);
// icon font - i prefer pictos - well worth the license.
@font-face { font-family: 'Pictos'; src: url('pictos-web.eot'); src: local('☺'), url('/fonts/pictos-web.woff') format('woff'), url('/fonts/pictos-web.ttf') format('truetype'), url('/fonts/pictos-web.svg#webfontIyfZbseF') format('svg'); font-weight: normal; font-style: normal; }
// declare your mixins for typeface-styles
@mixin font-sans-serif { font-family: "PT Sans", "Myriad Pro", Arial, Helvetica, Sans-Serif; }
@mixin font-serif { font-family: "Crimson Text", "Fjord One", Georgia, "Times New Roman", serif; }
@mixin font-icon { font-family: Pictos; }
@mixin light-text {
  color: $off-white;
  text-shadow: 0 -1px rgba($blackblue, .3);
}
@mixin dark-text {
  color: $blackblue;
  text-shadow: 0 1px rgba($off-white, .3);
}
// you may want to put font-sizes here.
$base-font-size: 16px;