For future reference.
root
└── assets
├── sass
│ ├── style.scss
└── fonts
├── font-label
| └── font-file.extension
└── font-label
└── font-file.extension
$root_path: "/root/";
$font_path: $root_path + "assets/fonts/";
// String replace
// ------------------------------------------------------------------------
// @param $string [string] : string
// @param $old [string] : substring to replace
// @param $new [string] : string to replace substring
// ------------------------------------------------------------------------
// @return : [string]
@function str-replace($string, $old, $new) {
$length: str-length($new);
$index: str-index($string, $old);
$slice: $string;
@while $index != null {
$slice: str-slice($slice, 0, $index - 1);
$slice: $slice + $new;
$slice: $slice + str-slice($string, $index + $length);
@return str-replace($slice, $old, $new);
}
@return $slice;
}
$fonts: (
"cinzel": "cinzel-regular",
"great vibes": "greatvibes-regular",
"lato": (
"bold": "lato-bold",
"bold italic": "lato-bolditalic",
"light": "lato-light",
"light italic": "lato-lightitalic"
),
);
// Automagic @font-face
// ------------------------------------------------------------------------
// @useage : $fonts [map] : output fonts from map
// ------------------------------------------------------------------------
// Make sure it's a valid map before attempting the loop
@if is-map($fonts) {
// Loop over each label => font and output a @font-face directive
@each $label, $font in $fonts {
// Clean up label with dashes instead of spaces
$clean_label: to-lower-case(str-replace($label, " ", "-"));
// Check for additional weights
@if is-map($font) {
// Output for each weight, append weight to label
@each $weight, $variant in $font {
@font-face {
font-family: "#{$label + ' ' + $weight}";
src: url("#{$font_path + $clean_label}/#{$variant}.eot");
src: url("#{$font_path + $clean_label}/#{$variant}.eot?#iefix") format("embedded-opentype"),
url("#{$font_path + $clean_label}/#{$variant}.woff") format("woff"),
url("#{$font_path + $clean_label}/#{$variant}.ttf") format("truetype"),
url("#{$font_path + $clean_label}/#{$variant + '#' + $clean_label}") format("svg");
font-weight: normal;
font-style: normal;
}
}
// Single weight, no loop needed
} @else {
@font-face {
font-family: "#{$label}";
src: url("#{$font_path + $clean_label}/#{$font}.eot");
src: url("#{$font_path + $clean_label}/#{$font}.eot?#iefix") format("embedded-opentype"),
url("#{$font_path + $clean_label}/#{$font}.woff") format("woff"),
url("#{$font_path + $clean_label}/#{$font}.ttf") format("truetype"),
url("#{$font_path + $clean_label}/#{$font + '#' + $clean_label}") format("svg");
font-weight: normal;
font-style: normal;
}
}
}
}
@font-face {
font-family: "cinzel";
src: url("/root/assets/fonts/cinzel/cinzel-regular.eot");
src: url("/root/assets/fonts/cinzel/cinzel-regular.eot?#iefix") format("embedded-opentype"), url("/root/assets/fonts/cinzel/cinzel-regular.woff") format("woff"), url("/root/assets/fonts/cinzel/cinzel-regular.ttf") format("truetype"), url("/root/assets/fonts/cinzel/cinzel-regular#cinzel") format("svg");
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: "great vibes";
src: url("/root/assets/fonts/great-vibes/greatvibes-regular.eot");
src: url("/root/assets/fonts/great-vibes/greatvibes-regular.eot?#iefix") format("embedded-opentype"), url("/root/assets/fonts/great-vibes/greatvibes-regular.woff") format("woff"), url("/root/assets/fonts/great-vibes/greatvibes-regular.ttf") format("truetype"), url("/root/assets/fonts/great-vibes/greatvibes-regular#great-vibes") format("svg");
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: "lato bold";
src: url("/root/assets/fonts/lato/lato-bold.eot");
src: url("/root/assets/fonts/lato/lato-bold.eot?#iefix") format("embedded-opentype"), url("/root/assets/fonts/lato/lato-bold.woff") format("woff"), url("/root/assets/fonts/lato/lato-bold.ttf") format("truetype"), url("/root/assets/fonts/lato/lato-bold#lato") format("svg");
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: "lato bold italic";
src: url("/root/assets/fonts/lato/lato-bolditalic.eot");
src: url("/root/assets/fonts/lato/lato-bolditalic.eot?#iefix") format("embedded-opentype"), url("/root/assets/fonts/lato/lato-bolditalic.woff") format("woff"), url("/root/assets/fonts/lato/lato-bolditalic.ttf") format("truetype"), url("/root/assets/fonts/lato/lato-bolditalic#lato") format("svg");
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: "lato light";
src: url("/root/assets/fonts/lato/lato-light.eot");
src: url("/root/assets/fonts/lato/lato-light.eot?#iefix") format("embedded-opentype"), url("/root/assets/fonts/lato/lato-light.woff") format("woff"), url("/root/assets/fonts/lato/lato-light.ttf") format("truetype"), url("/root/assets/fonts/lato/lato-light#lato") format("svg");
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: "lato light italic";
src: url("/root/assets/fonts/lato/lato-lightitalic.eot");
src: url("/root/assets/fonts/lato/lato-lightitalic.eot?#iefix") format("embedded-opentype"), url("/root/assets/fonts/lato/lato-lightitalic.woff") format("woff"), url("/root/assets/fonts/lato/lato-lightitalic.ttf") format("truetype"), url("/root/assets/fonts/lato/lato-lightitalic#lato") format("svg");
font-weight: normal;
font-style: normal;
}