Skip to content

Instantly share code, notes, and snippets.

@odyright
Created October 8, 2019 10:14
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save odyright/50177efad121f047c90f14af4fb4cba7 to your computer and use it in GitHub Desktop.
Save odyright/50177efad121f047c90f14af4fb4cba7 to your computer and use it in GitHub Desktop.
Compiles whole font-family @font-face rules. Uses a mixin and (preferably) separate file for each font-family and compiles css with @font-face rules for each weight/style. example.scss shows a font-family file, the other is the actual mixin.
// example font-face file
/* -----------------------------------------
Geometrica Font
------------------------------------------*/
// Source:
// -------
// DesignCuts: Exceptional Best-Selling Fonts Complete
// Latinotype
// variables
$path-prefix: './webfonts';
$font-subfolder: 'geometrica';
$font-name: 'Geometrica';
$font-family: 'geometrica';
$font-formats: EOT WOFF SVG TTF;
@import 'mixin-fontface';
/* Thin */
@include fontFace( #{$font-name}-Thin, 100, normal );
/* Thin Italic */
@include fontFace( #{$font-name}-ThinIt, 100, italic );
/* Extra Light */
@include fontFace( #{$font-name}-ExtraLight, 200, normal );
/* Extra Light Italic */
@include fontFace( #{$font-name}-ExtraLightIt, 200, italic );
/* Light */
@include fontFace( #{$font-name}-Light, 300, normal );
/* Light Italic */
@include fontFace( #{$font-name}-LightIt, 300, italic );
/* Book */
@include fontFace( #{$font-name}-Book, 400, normal );
/* Book Italic */
@include fontFace( #{$font-name}-BookIt, 400, italic );
/* Regular */
@include fontFace( #{$font-name}-Regular, 500, normal );
/* Regular Italic */
@include fontFace( #{$font-name}-RegularIt, 500, italic );
/* Medium */
@include fontFace( #{$font-name}-Medium, 600, normal );
/* Medium Italic */
@include fontFace( #{$font-name}-MediumIt, 600, italic );
/* Bold */
@include fontFace( #{$font-name}-Bold, 700, normal );
/* Bold Italic */
@include fontFace( #{$font-name}-BoldIt, 700, italic );
/* Extra Bold */
@include fontFace( #{$font-name}-ExtraBold, 800, normal );
/* Extra Bold Italic */
@include fontFace( #{$font-name}-ExtraBoldIt, 800, italic );
/* Black */
@include fontFace( #{$font-name}-Black, 900, normal );
/* Black Italic */
@include fontFace( #{$font-name}-BlackIt, 900, italic );
// There's also an Extra Black
// /* Extra Black */
// @include fontFace( #{$font-name}-ExtraBlack, 900, normal );
// /* Extra Black Italic */
// @include fontFace( #{$font-name}-ExtraBlackIt, 900, italic );
// ----------------------------------------
// Usage
// ----------------------------------------
// (1) Set 'variables' below to override the defaults
//
// (2) Include this mixin
// @import 'mixin-fontface';
//
// (3) Add this line for each weight & style, preferably in separate scss files:
// @include fontFace( #{$font-name}<-weight>, <weight numbers>, <font style> );
// variables
$path-prefix: '../webfonts' !default;
$font-subfolder: '' !default;
$font-name: 'generic-font-name' !default;
$font-family: $font-name !default;
$font-formats: EOT WOFF SVG TTF !default; // EOT WOFF WOFF2 SVG OTF TTF
// append slash
@if $font-subfolder not "" {
$font-subfolder: "#{$font-subfolder}/";
}
// subfolders for each font format
$EOT: '#{$font-subfolder}EOT' !default;
$WOFF: '#{$font-subfolder}WOFF' !default;
$WOFF2: '#{$font-subfolder}WOFF2' !default;
$OTF: '#{$font-subfolder}OTF' !default;
$SVG: '#{$font-subfolder}SVG' !default;
$TTF: '#{$font-subfolder}TTF' !default;
// list to contain formats
$format-list: parseFontList($font-formats);
// ----------------------------------------------
// fontFace
//
// Compiles to a font face rule.
// Uses variables set above.
// ----------------------------------------------
@mixin fontFace( $filename, $fw, $fs ) {
// blank list to compile
$font-list: ();
// if format listed, add to compile list
@if index($font-formats, 'EOT') {
$font-list: append(
$font-list,
unquote("url(#{$path-prefix}/#{$EOT}/#{$filename}.eot?#iefix) format('embedded-opentype')"),
comma
);
}
@if index($font-formats, 'WOFF') {
$font-list: append(
$font-list,
unquote("url(#{$path-prefix}/#{$WOFF}/#{$filename}.woff) format('woff')"),
comma
);
}
@if index($font-formats, 'WOFF2') {
$font-list: append(
$font-list,
unquote("url(#{$path-prefix}/#{$WOFF2}/#{$filename}.woff2) format('woff2'),"),
comma
);
}
@if index($font-formats, 'SVG') {
$font-list: append(
$font-list,
unquote("url(#{$path-prefix}/#{$SVG}/#{$filename}.svg##{$font-name}) format('svg')"),
comma
);
}
@if index($font-formats, 'TTF') {
$font-list: append(
$font-list,
unquote("url(#{$path-prefix}/#{$TTF}/#{$filename}.ttf) format('truetype')"),
comma
);
}
@if index($font-formats, 'OTF') {
$font-list: append(
$font-list,
unquote("url(#{$path-prefix}/#{$OTF}/#{$filename}.otf) format('opentype');"),
comma
);
}
// create @font-face rule
@font-face {
font-family: $font-family;
font-weight: $fw;
font-style: $fs;
src:
$font-list
;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment