Skip to content

Instantly share code, notes, and snippets.

@KittyGiraudel
Last active February 16, 2016 20:33
Show Gist options
  • Star 2 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save KittyGiraudel/ec1912cce6c48b381c32 to your computer and use it in GitHub Desktop.
Save KittyGiraudel/ec1912cce6c48b381c32 to your computer and use it in GitHub Desktop.
Generated by SassMeister.com.
// ----
// Sass (v3.4.14)
// Compass (v1.0.3)
// ----
////
/// Font-face importer (FFI)
/// @author Hugo Giraudel
////
/// Default path to locate font files
/// @type String
/// @access public
$ffi-font-path: '/fonts' !default;
/// List storing all the fonts to import
/// Each item is a map with keys `name`, `src`, `weight` (optional) and `style` (optional)
/// @type List
/// @access public
$ffi-fonts: () !default;
/// Mixin to import a single font
/// @param {String} $name - Name of the font to import
/// @param {List} $src - Sources of the font to import
/// @param {String | Number} $weight [normal] - Weight of the font to import
/// @param {String | Number} $style [normal] - Style of the font to import
/// @access public
@mixin ffi-font-face($name, $src, $weight: normal, $style: normal) {
@at-root {
@font-face {
font-family: $name;
src: $src;
font-weight: unquote($weight);
font-style: unquote($style);
}
}
}
/// Mixin to import several fonts at once
/// @param {List} $fonts - Fonts to import
/// @access public
@mixin ffi-batch-font-face($fonts) {
@each $font in $fonts {
$font: map-merge($font, (
'src': ffi-get-src($font)
));
@include ffi-font-face($font...);
}
}
/// Function to build a valid `src` from a map of sources
/// @param {Map} $font - Font to build the source for
/// @return {List}
/// @access private
@function ffi-get-src($font) {
$src: ();
@each $format, $filename in map-get($font, 'src') {
$src: append($src, url($ffi-font-path + '/' + $filename) unquote(format(quote($format))), 'comma');
}
@return $src;
}
// ------------------
// Example
// ------------------
$ffi-fonts: (
(
'name': 'Proxima-Nova',
'src': (
'woff': 'Proxima-Nova.woff',
'woff2': 'ProxNova.woff2'
)
),
(
'name': 'Proxima-Nova-Light',
'src': (
'embedded-opentype': 'Proxima-Nova-Light.eot',
'woff': 'Proxima-Nova-Light.woff',
'woff2': 'ProxNovaLight.woff2'
),
'weight': 300
),
(
'name': 'Proxima-Nova-Italic',
'src': (
'woff': 'Proxima-Nova-Italic.woff',
'woff2': 'ProxNovaItalic.woff2'
),
'style': 'italic'
),
);
@include ffi-batch-font-face($ffi-fonts);
@font-face {
font-family: "Proxima-Nova";
src: url("/fonts/Proxima-Nova.woff") format("woff"), url("/fonts/ProxNova.woff2") format("woff2");
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: "Proxima-Nova-Light";
src: url("/fonts/Proxima-Nova-Light.eot") format("embedded-opentype"), url("/fonts/Proxima-Nova-Light.woff") format("woff"), url("/fonts/ProxNovaLight.woff2") format("woff2");
font-weight: 300;
font-style: normal;
}
@font-face {
font-family: "Proxima-Nova-Italic";
src: url("/fonts/Proxima-Nova-Italic.woff") format("woff"), url("/fonts/ProxNovaItalic.woff2") format("woff2");
font-weight: normal;
font-style: italic;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment