jonathantneal · June 2, 2025 07:21 · Jan 5, 2015 · Jan 3, 2015 · Jan 3, 2015 · Jan 3, 2015
diff --git a/README.md b/README.md
@@ -2,7 +2,7 @@
 
 A mixin for writing @font-face rules in SASS.
 
-## Usages
+## Usage
 
 Create a font face rule. Embedded OpenType, WOFF2, WOFF, TrueType, and SVG files are automatically sourced.
 

diff --git a/_mixins.scss b/_mixins.scss
@@ -25,6 +25,7 @@
 	);
 
 	$formats: (
+		otf: "opentype",
 		ttf: "truetype"
 	);
 

diff --git a/README.md b/README.md
@@ -86,6 +86,6 @@ Rendered as CSS:
 
 ## Notes
 
-IE≥9 prioritizes valid font formats over invalid ones. Therefore, while `embedded-opentype` the correct format for an **.eot** font, `eot` is written to fool modern IE into prioritizing other, newer font formats.
+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 after the first opening parenthesis to the last closing parenthesis as a single URL. Therefore, a `?` is appended to the **.eot**’s URL, fooling older IE into interpreting all other sources as query parameters.
+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.
diff --git a/README.md b/README.md
@@ -65,7 +65,7 @@ Rendered as CSS:
 
 ---
 
-Create a font face that applies to 500 weight text and sources EOT, WOFF2, and WOFF.
+Create a font face rule that applies to 500 weight text and sources EOT, WOFF2, and WOFF.
 
 ```scss
 @include font-face(Samplinal, fonts/Samplinal, 500, normal, eot woff2 woff);

diff --git a/README.md b/README.md
@@ -23,6 +23,8 @@ Rendered as CSS:
 }
 ```
 
+---
+
 Create a font face rule that applies to bold and italic text.
 
 ```scss
@@ -44,6 +46,8 @@ Rendered as CSS:
 }
 ```
 
+---
+
 Create a font face rule that only sources a WOFF.
 
 ```scss
@@ -59,6 +63,8 @@ Rendered as CSS:
 }
 ```
 
+---
+
 Create a font face that applies to 500 weight text and sources EOT, WOFF2, and WOFF.
 
 ```scss

diff --git a/README.md b/README.md
@@ -10,7 +10,7 @@ Create a font face rule. Embedded OpenType, WOFF2, WOFF, TrueType, and SVG files
 @include font-face(Samplino, fonts/Samplino);
 ```
 
-Which becomes:
+Rendered as CSS:
 
 ```css
 @font-face {
@@ -29,7 +29,7 @@ Create a font face rule that applies to bold and italic text.
 @include font-face("Samplina Neue", fonts/SamplinaNeue, bold, italic);
 ```
 
-Which becomes:
+Rendered as CSS:
 
 ```css
 @font-face {
@@ -50,7 +50,7 @@ Create a font face rule that only sources a WOFF.
 @include font-face(Samplinoff, fonts/Samplinoff, null, null, woff);
 ```
 
-Which becomes:
+Rendered as CSS:
 
 ```css
 @font-face {
@@ -65,7 +65,7 @@ Create a font face that applies to 500 weight text and sources EOT, WOFF2, and W
 @include font-face(Samplinal, fonts/Samplinal, 500, normal, eot woff2 woff);
 ```
 
-Which becomes:
+Rendered as CSS:
 
 ```css
 @font-face {

diff --git a/README.md b/README.md
@@ -59,7 +59,7 @@ Which becomes:
 }
 ```
 
-Create a font face that applies to 500 weight text and only sources a WOFF.
+Create a font face that applies to 500 weight text and sources EOT, WOFF2, and WOFF.
 
 ```scss
 @include font-face(Samplinal, fonts/Samplinal, 500, normal, eot woff2 woff);

diff --git a/README.md b/README.md
@@ -0,0 +1,85 @@
+# Font Face
+
+A mixin for writing @font-face rules in SASS.
+
+## Usages
+
+Create a font face rule. Embedded OpenType, WOFF2, WOFF, TrueType, and SVG files are automatically sourced.
+
+```scss
+@include font-face(Samplino, fonts/Samplino);
+```
+
+Which becomes:
+
+```css
+@font-face {
+	font-family: "Samplino";
+	src: url("fonts/Samplino.eot?") format("eot"),
+		 url("fonts/Samplino.woff2") format("woff2"),
+		 url("fonts/Samplino.woff") format("woff"),
+		 url("fonts/Samplino.ttf") format("truetype"),
+		 url("fonts/Samplino.svg#Samplino") format("svg");
+}
+```
+
+Create a font face rule that applies to bold and italic text.
+
+```scss
+@include font-face("Samplina Neue", fonts/SamplinaNeue, bold, italic);
+```
+
+Which becomes:
+
+```css
+@font-face {
+	font-family: "Samplina Neue";
+	font-style: italic;
+	font-weight: bold;
+	src: url("fonts/SamplinaNeue.eot?") format("eot"),
+	     url("fonts/SamplinaNeue.woff2") format("woff2"),
+	     url("fonts/SamplinaNeue.woff") format("woff"),
+	     url("fonts/SamplinaNeue.ttf") format("truetype"),
+	     url("fonts/SamplinaNeue.svg#Samplina_Neue") format("svg");
+}
+```
+
+Create a font face rule that only sources a WOFF.
+
+```scss
+@include font-face(Samplinoff, fonts/Samplinoff, null, null, woff);
+```
+
+Which becomes:
+
+```css
+@font-face {
+	font-family: "Samplinoff";
+	src: url("fonts/Samplinoff.woff") format("woff");
+}
+```
+
+Create a font face that applies to 500 weight text and only sources a WOFF.
+
+```scss
+@include font-face(Samplinal, fonts/Samplinal, 500, normal, eot woff2 woff);
+```
+
+Which becomes:
+
+```css
+@font-face {
+	font-family: "Samplinal";
+	font-style: normal;
+	font-weight: 500;
+	src: url("fonts/Samplinal.eot?") format("eot"),
+	     url("fonts/Samplinal.woff2") format("woff2"),
+	     url("fonts/Samplinal.woff") format("woff");
+}
+```
+
+## Notes
+
+IE≥9 prioritizes valid font formats over invalid ones. Therefore, while `embedded-opentype` the correct format for an **.eot** font, `eot` is written to fool modern IE into prioritizing other, newer font formats.
+
+IE≤8 only supports **.eot** fonts and parses the `src` property incorrectly, interpreting everything after the first opening parenthesis to the last closing parenthesis as a single URL. Therefore, a `?` is appended to the **.eot**’s URL, fooling older IE into interpreting all other sources as query parameters.
diff --git a/README.scss → _mixins.scss b/README.scss → _mixins.scss
@@ -14,12 +14,6 @@
 
 // =============================================================================
 // Font Face
-//
-// Example usages:
-// @include font-face(Samplino, fonts/Samplino);
-// @include font-face(Samplino, fonts/Samplino, bold, italic);
-// @include font-face(Samplino, fonts/Samplino, null, null, woff);
-// @include font-face(Samplino, fonts/Samplino, 500, normal, eot woff2 woff);
 // =============================================================================
 
 @mixin font-face($name, $path, $weight: null, $style: null, $exts: eot woff2 woff ttf svg) {
@@ -31,7 +25,6 @@
 	);
 
 	$formats: (
-		eot: "!",
 		ttf: "truetype"
 	);
 

diff --git a/README.scss b/README.scss
@@ -0,0 +1,50 @@
+// =============================================================================
+// 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
+//
+// Example usages:
+// @include font-face(Samplino, fonts/Samplino);
+// @include font-face(Samplino, fonts/Samplino, bold, italic);
+// @include font-face(Samplino, fonts/Samplino, null, null, woff);
+// @include font-face(Samplino, fonts/Samplino, 500, normal, eot woff2 woff);
+// =============================================================================
+
+@mixin font-face($name, $path, $weight: null, $style: null, $exts: eot woff2 woff ttf svg) {
+	$src: null;
+
+	$extmods: (
+		eot: "?",
+		svg: "#" + str-replace($name, " ", "_")
+	);
+
+	$formats: (
+		eot: "!",
+		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;
+	}
+}