Skip to content

Instantly share code, notes, and snippets.

@mirisuzanne
Created June 4, 2012 18:05
Show Gist options
  • Save mirisuzanne/2869914 to your computer and use it in GitHub Desktop.
Save mirisuzanne/2869914 to your computer and use it in GitHub Desktop.
Naming convention for new Compass @font-face API
// New fontface naming conventions & API
// File Structure
//
// - fonts_dir/ [config setting]
// - simple.eot
// - simple.svg
// - simple.ttf
// - simple.woff
// - folder/
// - nested-font.eot
// - nested-font.otf
// - nested-font.woff
//
// Fonts to be loaded in the same font-face mixin (same variation, different format)
// should share the same filename, not counting the extension.
//
// Formats will be determined based on extension:
// (unless Ruby has a better way of determining font format?)
// '.ttf' => 'truetype'
// '.otf' => 'opentype'
// '.woff' => 'woff'
// '.svg' => 'svg'
// '.svgz' => 'svg'
// '.eot' => 'eot'
// font-face mixin
//
// $name : (string or list, required) The name and optional SVG-ID to use.
// - string "simpleName" => name: simpleName, ID: #simpleName
// - list "name #id" => name: name, ID: #id
// $location : (string) The location of the font files - use $name if none provided.
// - Locations include the file name, without extensions:
// 'simple' => 'simple.eot', 'simple.ttf', 'simple.woff'
// 'folder/nested-font' => 'folder/nested-font.eot' etc...
// - Locations are relative to the set fonts_dir:
// 'simple' => 'project/fonts_dir/simple'
// $weight : (string | number) any accepted font-weight value.
// $style : (string) any accepted font-style value.
// $inline : (boolean | string ) true/false or the version of the font to inline (e.g. "woff").
@mixin font-face($name, $location: $name, $weight: normal, $style: normal, $inline: false) {
// ... the magic ...
}
// -----------------------
// 1) default
@include font-face(simple);
// default output
@font-face {
font-family: "simple";
src: url('path/to/fonts_dir/simple.eot');
src: url('path/to/fonts_dir/simple.eot?#iefix') format('eot'),
url('path/to/fonts_dir/simple.woff') format('woff'),
url('path/to/fonts_dir/simple.ttf') format('truetype'),
url('path/to/fonts_dir/simple.svg#simple') format('svg');
font-weight: normal;
font-style: normal;
}
// -----------------------
// 2) name change
@include font-face(NewName, simple);
// name change output
@font-face {
font-family: "NewName";
src: url('path/to/fonts_dir/simple.eot');
src: url('path/to/fonts_dir/simple.eot?#iefix') format('eot'),
url('path/to/fonts_dir/simple.woff') format('woff'),
url('path/to/fonts_dir/simple.ttf') format('truetype'),
url('path/to/fonts_dir/simple.svg#NewName') format('svg');
font-weight: normal;
font-style: normal;
}
// -----------------------
// 3) nested use
@include font-face(Nested, 'folder/nested-font');
// nested output
@font-face {
font-family: "Nested";
src: url('path/to/fonts_dir/folder/nested-font.eot');
src: url('path/to/fonts_dir/folder/nested-font.eot?#iefix') format('eot'),
url('path/to/fonts_dir/folder/nested-font.woff') format('woff'),
url('path/to/fonts_dir/folder/nested-font.otf') format('opentype'),
url('path/to/fonts_dir/folder/nested-font.svg#Nested') format('svg');
font-weight: normal;
font-style: normal;
}
// -----------------------
// 4) WRONG
@include font-face(wrong);
// WRONG output
/* error: no font files found at "fonts_dir/wrong",
please provide the correct location and file name. */
@silvenon
Copy link

This is awesome.

@sunny
Copy link

sunny commented Jan 18, 2013

Awesome API!

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