Skip to content

Instantly share code, notes, and snippets.

@tristanm
Created July 6, 2012 02:14
Show Gist options
  • Save tristanm/3057637 to your computer and use it in GitHub Desktop.
Save tristanm/3057637 to your computer and use it in GitHub Desktop.
Embedded Fonts
// ****************
// **** NORMAL ****
// ****************
// COMPASS:
// Best order for font-files is WOFF->TTF->SVG while the EOT is a separate parameter for font-face
// Best weight and style order is Regular->Bold->Italic->Bold+Italic
@include font-face("Aller", font-files("aller_rg-webfont.woff", "aller_rg-webfont.ttf", "aller_rg-webfont.svg"), "aller_rg-webfont.eot");
@include font-face("Aller", font-files("aller_bd-webfont.woff", "aller_bd-webfont.ttf", "aller_bd-webfont.svg"), "aller_bd-webfont.eot", bold);
@include font-face("Aller", font-files("aller_it-webfont.woff", "aller_it-webfont.ttf", "aller_it-webfont.svg"), "aller_it-webfont.eot", normal, italic);
@include font-face("Aller", font-files("aller_bdit-webfont.woff", "aller_bdit-webfont.ttf", "aller_bdit-webfont.svg"), "aller_bdit-webfont.eot", bold, italic);
// CSS (output from above):
@font-face {
font-family: "Aller";
src: url(/assets/aller_rg-webfont.eot);
src: url(/assets/aller_rg-webfont.eot?#iefix) format('eot'), url(/assets/aller_rg-webfont.woff) format('woff'), url(/assets/aller_rg-webfont.ttf) format('truetype'), url(/assets/aller_rg-webfont.svg) format('svg');
}
@font-face {
font-family: "Aller";
src: url(/assets/aller_bd-webfont.eot);
src: url(/assets/aller_bd-webfont.eot?#iefix) format('eot'), url(/assets/aller_bd-webfont.woff) format('woff'), url(/assets/aller_bd-webfont.ttf) format('truetype'), url(/assets/aller_bd-webfont.svg) format('svg');
font-weight: bold;
}
@font-face {
font-family: "Aller";
src: url(/assets/aller_it-webfont.eot);
src: url(/assets/aller_it-webfont.eot?#iefix) format('eot'), url(/assets/aller_it-webfont.woff) format('woff'), url(/assets/aller_it-webfont.ttf) format('truetype'), url(/assets/aller_it-webfont.svg) format('svg');
font-weight: normal;
font-style: italic;
}
@font-face {
font-family: "Aller";
src: url(/assets/aller_bdit-webfont.eot);
src: url(/assets/aller_bdit-webfont.eot?#iefix) format('eot'), url(/assets/aller_bdit-webfont.woff) format('woff'), url(/assets/aller_bdit-webfont.ttf) format('truetype'), url(/assets/aller_bdit-webfont.svg) format('svg');
font-weight: bold;
font-style: italic;
}
// ******************
// **** Embedded ****
// ******************
// COMPASS:
// SVG and EOT don't work so well as inline fonts so include them normally first
// Note the way that weight and style are sometimes defined when there is no EOT parameter preceeding them
@include font-face("Aller", font-files("aller_rg-webfont.svg"), "aller_rg-webfont.eot");
@include font-face("Aller", inline-font-files("aller_rg-webfont.woff", woff, "aller_rg-webfont.ttf", truetype));
@include font-face("Aller", font-files("aller_bd-webfont.svg"), "aller_bd-webfont.eot", bold);
@include font-face("Aller", inline-font-files("aller_bd-webfont.woff", woff, "aller_bd-webfont.ttf", truetype), $weight: bold);
@include font-face("Aller", font-files("aller_it-webfont.svg"), "aller_it-webfont.eot", normal, italic);
@include font-face("Aller", inline-font-files("aller_it-webfont.woff", woff, "aller_it-webfont.ttf", truetype), $style: italic);
@include font-face("Aller", font-files("aller_bdit-webfont.svg"), "aller_bdit-webfont.eot", bold, italic);
@include font-face("Aller", inline-font-files("aller_bdit-webfont.woff", woff, "aller_bdit-webfont.ttf", truetype), $weight: bold, $style: italic);
// CSS (output from above):
// Note that inline data is not shown in full
@font-face {
font-family: "Aller";
src: url(/assets/aller_rg-webfont.eot);
src: url(/assets/aller_rg-webfont.eot?#iefix) format('eot'), url(/assets/aller_rg-webfont.svg) format('svg');
}
@font-face {
font-family: "Aller";
src: url('data:application/x-font-woff;base64,d09G...AA==') format('woff'), url('data:font/truetype;base64,AAEA...FCs=') format('truetype');
}
@font-face {
font-family: "Aller";
src: url(/assets/aller_bd-webfont.eot);
src: url(/assets/aller_bd-webfont.eot?#iefix) format('eot'), url(/assets/aller_bd-webfont.svg) format('svg');
font-weight: bold;
}
@font-face {
font-family: "Aller";
src: url('data:application/x-font-woff;base64,d09G...iEdh') format('woff'), url('data:font/truetype;base64,AAEA...KwA=') format('truetype');
font-weight: bold;
}
@font-face {
font-family: "Aller";
src: url(/assets/aller_it-webfont.eot);
src: url(/assets/aller_it-webfont.eot?#iefix) format('eot'), url(/assets/aller_it-webfont.svg) format('svg');
font-weight: normal;
font-style: italic;
}
@font-face {
font-family: "Aller";
src: url('data:application/x-font-woff;base64,d09G...Ez0q') format('woff'), url('data:font/truetype;base64,AAEA...AAA=') format('truetype');
font-style: italic;
}
@font-face {
font-family: "Aller";
src: url(/assets/aller_bdit-webfont.eot);
src: url(/assets/aller_bdit-webfont.eot?#iefix) format('eot'), url(/assets/aller_bdit-webfont.svg) format('svg');
font-weight: bold;
font-style: italic;
}
@font-face {
font-family: "Aller";
src: url('data:application/x-font-woff;base64,d09G...bE8S') format('woff'), url('data:font/truetype;base64,AAEA...AAA=') format('truetype');
font-weight: bold;
font-style: italic;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment