Skip to content

Instantly share code, notes, and snippets.

@guyroutledge
Created May 17, 2013 12:30
Show Gist options
  • Save guyroutledge/5598719 to your computer and use it in GitHub Desktop.
Save guyroutledge/5598719 to your computer and use it in GitHub Desktop.
Compass font-face loop
// Generate @font-face declarations for a list of fonts
// relative path to fonts
$font-path: '../fonts/';
// the name that will be used in font-family property
$font-families: 'font1', 'font2', 'font3';
// the filename of your font without the file extension
$font-filenames: 'font1_filename', 'font2_filename', 'font3_filename';
$i: 1;
@each $font-family in $font-families {
@font-face {
font-family: $font-family;
src: url($font-path + nth($font-filenames, $i) + '.eot');
src: url($font-path + nth($font-filenames, $i) + '.eot?#iefix') format('embedded-opentype'),
url($font-path + nth($font-filenames, $i) + '.woff') format('woff'),
url($font-path + nth($font-filenames, $i) + '.ttf') format('truetype'),
url($font-path + nth($font-filenames, $i) + '.svg#' + $font-family) format('svg');
font-weight: normal;
font-style: normal;
}
$i: $i+1;
}
// Sample output
// @font-face {
// font-family: "font1";
// src: url("../fonts/font1_filename.eot");
// src: url("../fonts/font1_filename.eot?#iefix") format("embedded-opentype"),
// url("../fonts/font1_filename.woff") format("woff"),
// url("../fonts/font1_filename.ttf") format("truetype"),
// url("../fonts/font1_filename.svg#font1") format("svg");
// font-weight: normal;
// font-style: normal;
// }
// @font-face {
// font-family: "font2";
// src: url("../fonts/font2_filename.eot");
// src: url("../fonts/font2_filename.eot?#iefix") format("embedded-opentype"),
// url("../fonts/font2_filename.woff") format("woff"),
// url("../fonts/font2_filename.ttf") format("truetype"),
// url("../fonts/font2_filename.svg#font2") format("svg");
// font-weight: normal;
// font-style: normal;
// }
// @font-face {
// font-family: "font3";
// src: url("../fonts/font3_filename.eot");
// src: url("../fonts/font3_filename.eot?#iefix") format("embedded-opentype"),
// url("../fonts/font3_filename.woff") format("woff"),
// url("../fonts/font3_filename.ttf") format("truetype"),
// url("../fonts/font3_filename.svg#font3") format("svg");
// font-weight: normal;
// font-style: normal;
// }
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment