Skip to content

Instantly share code, notes, and snippets.

@ghosh
Last active November 21, 2021 05:43
Show Gist options
  • Save ghosh/84d4842d520b72e026fb to your computer and use it in GitHub Desktop.
Save ghosh/84d4842d520b72e026fb to your computer and use it in GitHub Desktop.
Easy font face declarations using Sass lists, mixins and loops!
/**
* The path to the fonts folder, relative to the
* compiled stylesheet
*
* @type String
*/
$font-path: "../fonts/" !default;
/**
* A list of the project's font faces along with
* thier associated variants
*
* @type List
* Note: The format of this list is important.
* Do not miss the trailing comma for single line
* declarations
*/
$font-faces: (
'Gotham': (
"GothamRounded-Book" normal normal,
"GothamRounded-Medium" bold normal
),
'Valera': (
"varelaround-regular-webfont" normal normal,
)
) !default;
/**
* Generates a complete font face declarations
* where invoked
*
* @type mixin
*
* @param $font-family The with which the font family will be called
* @param $font-path The path to the fonts directory relative to the compiled stylesheet
* @param $font-file The name of the actual font file
* @param $font-weight The font weight (normal, bold, lighter)
* @param $font-weight The font style (normal, italic)
*
* Example Usage:
* @include font-face('Open Sans', '../fonts/', 'OpenSans-regular-webfont', bold, italic)
*/
@mixin font-face($font-family, $font-path, $font-file, $font-weight: normal, $font-style: normal ) {
@font-face {
font-family: $font-family;
src: url( $font-path + $font-file + '.eot' );
src: url( $font-path + $font-file + '.eot?#iefix') format('embedded-opentype'),
url( $font-path + $font-file + '.woff') format('woff'),
url( $font-path + $font-file + '.ttf') format('truetype'),
url( $font-path + $font-file + '.svg#{$font-family}') format('svg');
font-weight: $font-weight;
font-style: $font-style;
}
}
/**
* A loop to run through each font family
* and print the font face declarations of each
* variant
*
* Dependencies
* variable - $font-path
* list - $font-faces
* mixin - font-face
*/
@each $font in $font-faces {
$font-family: quote( #{nth($font, 1)} );
$font-variants: nth($font, 2);
@each $variant in $font-variants {
$font-path: $font-path !global;
$font-file: nth($variant, 1);
$font-weight: nth($variant, 2);
$font-style: nth($variant, 3);
@include font-face($font-family, $font-path, $font-file, $font-weight: normal, $font-style: normal )
}
}
@mirismaili
Copy link

mirismaili commented Jan 26, 2019

All rules will have the same font-weight (normal) as I tested in https://www.sassmeister.com/:

@font-face {
  font-family: "Gotham";
  src: url("../fonts/GothamRounded-Book.eot");
  src: url("../fonts/GothamRounded-Book.eot?#iefix") format("embedded-opentype"), url("../fonts/GothamRounded-Book.woff") format("woff"), url("../fonts/GothamRounded-Book.ttf") format("truetype"), url("../fonts/GothamRounded-Book.svgGotham") format("svg");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "Gotham";
  src: url("../fonts/GothamRounded-Medium.eot");
  src: url("../fonts/GothamRounded-Medium.eot?#iefix") format("embedded-opentype"), url("../fonts/GothamRounded-Medium.woff") format("woff"), url("../fonts/GothamRounded-Medium.ttf") format("truetype"), url("../fonts/GothamRounded-Medium.svgGotham") format("svg");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "Valera";
  src: url("../fonts/varelaround-regular-webfont.eot");
  src: url("../fonts/varelaround-regular-webfont.eot?#iefix") format("embedded-opentype"), url("../fonts/varelaround-regular-webfont.woff") format("woff"), url("../fonts/varelaround-regular-webfont.ttf") format("truetype"), url("../fonts/varelaround-regular-webfont.svgValera") format("svg");
  font-weight: normal;
  font-style: normal;
}

Also, all font-styles (if you edit $font-faces definition and inject differnt values for it).

@mirismaili
Copy link

I corrected it by:

@each $font-family, $font-variants in $font-faces {
	@each $variant in $font-variants {
		$font-path: $font-path !global;
		$font-file: nth($variant, 1);
		$font-weight: nth($variant, 2);
		$font-style: nth($variant, 3);

		@include font-face($font-family, $font-path, $font-file, $font-weight, $font-style )
	}
}

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment