Skip to content

Instantly share code, notes, and snippets.

@cdave3

cdave3/README.md

Forked from jonathantneal/README.md
Last active February 14, 2018 22:21
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save cdave3/0560da8671b1832d5ad16c6c756b5121 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save cdave3/0560da8671b1832d5ad16c6c756b5121 to your computer and use it in GitHub Desktop.
Download ZIP
SASS @font-face mixin
Raw
README.md

Font Face

A mixin for writing @font-face rules in SASS.

Usage

Create a font face rule. Embedded OpenType, WOFF2, WOFF, TrueType, and SVG files are automatically sourced.

@include font-face("Samplino", "../fonts/Samplino");

Rendered as CSS:

@font-face {
	font-family: "Samplino";
	src: url("../fonts/Samplino.eot?23577790") format("eot"),
		 url("../fonts/Samplino.woff2?23577790") format("woff2"),
		 url("../fonts/Samplino.woff?23577790") format("woff"),
		 url("../fonts/Samplino.ttf?23577790") format("truetype"),
		 url("../fonts/Samplino.svg?23577790#Samplino") format("svg");
}

Create a font face rule that applies to bold and italic text.

@include font-face("Samplina Neue", "fonts/SamplinaNeue", bold, italic);

Rendered as CSS:

@font-face {
	font-family: "Samplina Neue";
	font-style: italic;
	font-weight: bold;
	src: url("fonts/SamplinaNeue.eot?23577790") format("eot"),
	     url("fonts/SamplinaNeue.woff2?23577790") format("woff2"),
	     url("fonts/SamplinaNeue.woff?23577790") format("woff"),
	     url("fonts/SamplinaNeue.ttf?23577790") format("truetype"),
	     url("fonts/SamplinaNeue.svg?23577790#Samplina_Neue") format("svg");
}

Create a font face rule that only sources a WOFF.

@include font-face("Samplinoff", "fonts/Samplinoff", null, null, woff);

Rendered as CSS:

@font-face {
	font-family: "Samplinoff";
	src: url("fonts/Samplinoff.woff?23577790") format("woff");
}

Create a font face rule that applies to 500 weight text and sources EOT, WOFF2, and WOFF.

@include font-face("Samplinal", "fonts/Samplinal", 500, normal, eot woff2 woff);

Rendered as CSS:

@font-face {
	font-family: "Samplinal";
	font-style: normal;
	font-weight: 500;
	src: url("fonts/Samplinal.eot?23577790") format("eot"),
	     url("fonts/Samplinal.woff2?23577790") format("woff2"),
	     url("fonts/Samplinal.woff?23577790") format("woff");
}

Notes

IE≥9 prioritizes valid font formats over invalid ones. Therefore, while embedded-opentype is the correct format for an .eot font, eot is used to fool modern IE into prioritizing other, newer font formats.

IE≤8 only supports .eot fonts and parses the src property incorrectly, interpreting everything between the first opening parenthesis ( and the last closing parenthesis ) as a single URL. Therefore, a ? is appended to the .eot’s URL, fooling older IE into reading all other sources as query parameters.

Raw
_mixins.scss
// =============================================================================
// String Replace
// =============================================================================
@function str-replace($string, $search, $replace: "") {
$index: str-index($string, $search);
@if $index {
@return str-slice($string, 1, $index - 1) + $replace + str-replace(str-slice($string, $index + str-length($search)), $search, $replace);
}
@return $string;
}
// =============================================================================
// Font Face
// =============================================================================
@mixin font-face($name, $path, $weight: null, $style: null, $exts: eot woff2 woff ttf svg) {
$src: null;
$cache-bust: "?" + random(99999999);
$extmods: (
eot: $cache-bust,
woff2: $cache-bust,
woff: $cache-bust,
ttf: $cache-bust,
svg: $cache-bust + "#" + str-replace($name, " ", "_")
);
$formats: (
otf: "opentype",
ttf: "truetype"
);
@each $ext in $exts {
$extmod: if(map-has-key($extmods, $ext), $ext + map-get($extmods, $ext), $ext);
$format: if(map-has-key($formats, $ext), map-get($formats, $ext), $ext);
$src: append($src, url(quote($path + "." + $extmod)) format(quote($format)), comma);
}
@font-face {
font-family: quote($name);
font-style: $style;
font-weight: $weight;
src: $src;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment