Embedded Fonts

gistfile1.scss

// ****************
// **** 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;
}