Automagic font-face

gistfile1.md

Automagic @font-face

For future reference.

Tree

root
└── assets
    ├── sass
    │   ├── style.scss
    └── fonts
        ├── font-label
        |   └── font-file.extension
        └── font-label
            └── font-file.extension

Path vars

$root_path: "/root/";
$font_path: $root_path + "assets/fonts/";

Functions

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

Font map

$fonts: (
	"cinzel": "cinzel-regular",
	"great vibes": "greatvibes-regular",
	"lato": (
		"bold": "lato-bold",
		"bold italic": "lato-bolditalic",
		"light": "lato-light",
		"light italic": "lato-lightitalic"
	),
);

Render

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

Output

@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;
}