Skip to content

Instantly share code, notes, and snippets.

@envoytravis
Created September 17, 2014 21:10
Show Gist options
  • Save envoytravis/d1c65c9e2f0592710629 to your computer and use it in GitHub Desktop.
Save envoytravis/d1c65c9e2f0592710629 to your computer and use it in GitHub Desktop.
Generated by SassMeister.com.
// ----
// Sass (v3.4.4)
// Compass (v1.0.1)
// ----
$font-faces: (
('Helvetica-Neue', 'helveticaneue'),
('Helvetica-Neue-Bold', 'helveticaneue-bold-webfont', 700),
('Helvetica-Neue-Medium', 'helveticaneue-medium-webfont', 500),
('Avant-Garde-Black', 'itcavantgardestd-bk-webfont', 700),
('Avant-Garde-Bold', 'itcavantgardestd-bold-webfont', 500),
('Avant-Garde-Demi', 'itcavantgardestd-demi-webfont'),
('Avant-Garde-XLT', 'itcavantgardestd-xlt-webfont', 100)
);
$font-path: '../fonts/';
// font family mixin
@mixin font($font, $style: normal, $weight: normal) {
font-family: $font, Helvetica, Arial, sans-serif;
font-style: $style;
font-weight: $weight;
}
@each $font-face in $font-faces {
$font-css-name: nth($font-face, 1);
$font-url-name: nth($font-face, 2);
$font-weight: 'normal';
$font-style: 'normal';
// check if we need to change the weight or style
@if (length($font-face) > 2) {
$font-weight: nth($font-face, 3);
}
@if (length($font-face) > 3) {
$font-style: nth($font-face, 4);
}
// generate all font faces using their appropriate weights & styles
@font-face {
font-family: $font-css-name;
font-weight: $font-weight;
font-style: $font-style;
src: url('#{$font-path}#{$font-url-name}.eot');
src: url('#{$font-path}#{$font-url-name}.eot?') format('eot'),
url('#{$font-path}#{$font-url-name}.woff') format('woff'),
url('#{$font-path}#{$font-url-name}.ttf') format('truetype');
}
// generate placeholders so we can extend when we need to use a font
%#{$font-css-name} {
@include font($font-css-name, $font-style, $font-weight);
}
}
.test-block {
@extend %Helvetica-Neue;
}
@font-face {
font-family: "Helvetica-Neue";
font-weight: "normal";
font-style: "normal";
src: url("../fonts/helveticaneue.eot");
src: url("../fonts/helveticaneue.eot?") format("eot"), url("../fonts/helveticaneue.woff") format("woff"), url("../fonts/helveticaneue.ttf") format("truetype");
}
.test-block {
font-family: "Helvetica-Neue", Helvetica, Arial, sans-serif;
font-style: "normal";
font-weight: "normal";
}
@font-face {
font-family: "Helvetica-Neue-Bold";
font-weight: 700;
font-style: "normal";
src: url("../fonts/helveticaneue-bold-webfont.eot");
src: url("../fonts/helveticaneue-bold-webfont.eot?") format("eot"), url("../fonts/helveticaneue-bold-webfont.woff") format("woff"), url("../fonts/helveticaneue-bold-webfont.ttf") format("truetype");
}
@font-face {
font-family: "Helvetica-Neue-Medium";
font-weight: 500;
font-style: "normal";
src: url("../fonts/helveticaneue-medium-webfont.eot");
src: url("../fonts/helveticaneue-medium-webfont.eot?") format("eot"), url("../fonts/helveticaneue-medium-webfont.woff") format("woff"), url("../fonts/helveticaneue-medium-webfont.ttf") format("truetype");
}
@font-face {
font-family: "Avant-Garde-Black";
font-weight: 700;
font-style: "normal";
src: url("../fonts/itcavantgardestd-bk-webfont.eot");
src: url("../fonts/itcavantgardestd-bk-webfont.eot?") format("eot"), url("../fonts/itcavantgardestd-bk-webfont.woff") format("woff"), url("../fonts/itcavantgardestd-bk-webfont.ttf") format("truetype");
}
@font-face {
font-family: "Avant-Garde-Bold";
font-weight: 500;
font-style: "normal";
src: url("../fonts/itcavantgardestd-bold-webfont.eot");
src: url("../fonts/itcavantgardestd-bold-webfont.eot?") format("eot"), url("../fonts/itcavantgardestd-bold-webfont.woff") format("woff"), url("../fonts/itcavantgardestd-bold-webfont.ttf") format("truetype");
}
@font-face {
font-family: "Avant-Garde-Demi";
font-weight: "normal";
font-style: "normal";
src: url("../fonts/itcavantgardestd-demi-webfont.eot");
src: url("../fonts/itcavantgardestd-demi-webfont.eot?") format("eot"), url("../fonts/itcavantgardestd-demi-webfont.woff") format("woff"), url("../fonts/itcavantgardestd-demi-webfont.ttf") format("truetype");
}
@font-face {
font-family: "Avant-Garde-XLT";
font-weight: 100;
font-style: "normal";
src: url("../fonts/itcavantgardestd-xlt-webfont.eot");
src: url("../fonts/itcavantgardestd-xlt-webfont.eot?") format("eot"), url("../fonts/itcavantgardestd-xlt-webfont.woff") format("woff"), url("../fonts/itcavantgardestd-xlt-webfont.ttf") format("truetype");
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment