Skip to content

Instantly share code, notes, and snippets.

@mturnwall
Last active September 2, 2015 17:47
Show Gist options
  • Save mturnwall/fb89be11c454eb10e5ca to your computer and use it in GitHub Desktop.
Save mturnwall/fb89be11c454eb10e5ca to your computer and use it in GitHub Desktop.
Generated by SassMeister.com.
// ----
// libsass (v3.2.5)
// ----
/// this overrides the default fonts directory. Set
/// it to the location of your fonts.
$fonts-dir: '/fonts';
$fontsMap: (
"Proxima-Nova": (
"Proxima-Nova-Light-File": (
weight: 300
),
"Proxima-Nova-Italic-File": (
style: italic
),
"Proxima-Nova-Regular-File": null
)
);
/// Generate the CSS for @font-face rules. This mixin shouldn't be
/// called directly. You should use the buildFontFace mixin instead.
/// @param {String} $fontName - Group name the font will belong to
/// @param {String} $fontFile - filename of the font minus the extension
/// @param {String} $weight [normal] - font-weight
/// @param {String} $style [normal] - font-style
///
/// @access private
/// @author Michael Turnwall
@mixin _fontFace($fontName, $fontFile, $weight: normal, $style: normal) {
/// This is the directory where the fonts live. You can override this directory by declaring
/// your own `$fonts-dir` variable globally.
$fonts-dir: '/fonts' !default;
@font-face {
font-family: "#{$fontName}";
src: url("#{$fonts-dir}/#{$fontFile}.eot");
src: url("#{$fonts-dir}/#{$fontFile}.eot?#iefix") format("embedded-opentype"),
url("#{$fonts-dir}/#{$fontFile}.woff") format("woff"),
url("#{$fonts-dir}/#{$fontFile}.ttf") format("truetype");
font-weight: $weight;
font-style: $style;
}
}
///
/// Use this mixin to build our your custom font families using @font-face. You can
/// either call this mixin individually or pass it a Map. This way you can control your
/// font family groups using a map which is much easier to read and maintain.
///
/// The default font directory is `/fonts`. You can override this value by creating a variable
/// called `$fonts-dir` and setting it's value to where your fonts live.
///
/// @param {String} $fontName - Group name that the font will belong to
/// @param {String | Map} $font - this is the font name minus the file extenstion.
/// It can be either just a string of the name or
/// a map that contains the font weight and style.
/// @param {String} $weight [normal] - the font-weight value
/// @param {String} $style [normal] - the font-style value
/// @require {Mixin} _fontFace
/// @example scss
/// // Here is how the map should be setup.
/// // If you don't want to pass weight or style just set the value as null
/// $fontsMap: (
/// "Proxima-Nova": (
/// "Proxima-Nova-Light-File": (
/// weight: 300
/// ),
/// "Proxima-Nova-Italic-File": (
/// style: italic
/// ),
/// "Proxima-Nova-Regular-File": null
/// )
/// );
///
/// // You can also call it by passing a single font
/// @include buildFontFace("Proxima-Nova", "Proxima-Nova-Light-File", $weight: 300);
///
/// @author Michael Turnwall
@mixin buildFontFace($fontName, $font, $weight: normal, $style: normal) {
@if type-of($font) == map {
@if map-has-key($fontsMap, $fontName) {
@each $fontFile, $map in $font {
@if type-of($map) == map {
@if map-has-key($map, weight) {
$weight: map-get($map, weight);
}
@if map-has-key($map, style) {
$style: map-get($map, style);
}
}
@include _fontFace($fontName, $fontFile, $weight, $style);
$weight: normal;
$style: normal;
}
}
} @else {
@include _fontFace($fontName, $font, $weight, $style);
}
}
@each $fontName, $list in $fontsMap {
@include buildFontFace($fontName, $list);
}
@include buildFontFace("Proxima-Nova", "Proxima-Nova-Light-File", $weight: 300);
@font-face {
font-family: "Proxima-Nova";
src: url("/fonts/Proxima-Nova-Light-File.eot");
src: url("/fonts/Proxima-Nova-Light-File.eot?#iefix") format("embedded-opentype"), url("/fonts/Proxima-Nova-Light-File.woff") format("woff"), url("/fonts/Proxima-Nova-Light-File.ttf") format("truetype");
font-weight: 300;
font-style: normal;
}
@font-face {
font-family: "Proxima-Nova";
src: url("/fonts/Proxima-Nova-Italic-File.eot");
src: url("/fonts/Proxima-Nova-Italic-File.eot?#iefix") format("embedded-opentype"), url("/fonts/Proxima-Nova-Italic-File.woff") format("woff"), url("/fonts/Proxima-Nova-Italic-File.ttf") format("truetype");
font-weight: normal;
font-style: italic;
}
@font-face {
font-family: "Proxima-Nova";
src: url("/fonts/Proxima-Nova-Regular-File.eot");
src: url("/fonts/Proxima-Nova-Regular-File.eot?#iefix") format("embedded-opentype"), url("/fonts/Proxima-Nova-Regular-File.woff") format("woff"), url("/fonts/Proxima-Nova-Regular-File.ttf") format("truetype");
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: "Proxima-Nova";
src: url("/fonts/Proxima-Nova-Light-File.eot");
src: url("/fonts/Proxima-Nova-Light-File.eot?#iefix") format("embedded-opentype"), url("/fonts/Proxima-Nova-Light-File.woff") format("woff"), url("/fonts/Proxima-Nova-Light-File.ttf") format("truetype");
font-weight: 300;
font-style: normal;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment