Skip to content

Instantly share code, notes, and snippets.

@MoOx
Created December 9, 2012 08:01
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 MoOx/4243845 to your computer and use it in GitHub Desktop.
Save MoOx/4243845 to your computer and use it in GitHub Desktop.
@import "shared";
// Cross-browser support for @font-face. Supports IE, Gecko, Webkit, Opera.
//
// $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 - try to find in fonts_dir 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").
//
// * For android 2.2 Compatiblity, please ensure that your web page has
// a meta viewport tag.
// * To support iOS < 4.2, an SVG file must be provided
//
// Possible File Structure
//
// - fonts_dir/ [config setting]
// - simple.eot
// - simple.svg
// - simple.ttf
// - simple.woff
// - folder/ (recommanded)
// - nested-font.eot
// - nested-font.otf
// - nested-font.woff
//
// Formats are be determined based on extension:
// '.ttf' => 'truetype'
// '.otf' => 'opentype'
// '.woff' => 'woff'
// '.svg' => 'svg'
// '.svgz' => 'svg'
// '.eot' => 'eot'
//
// Fonts to be loaded in the same font-face mixin (same variation, different format)
// should share the same filename, not counting the extension.
//
// If you need to generate other formats check out the Font Squirrel
// [font generator](http://www.fontsquirrel.com/fontface/generator)
//
// In order to refer to a specific style of the font in your stylesheets as
// e.g. "font-style: italic;", you may add a couple of @font-face includes
// containing the respective font files for each style and specying
// respective the $style parameter.
// Order of the includes matters, and it is: normal, bold, italic, bold+italic.
$font-face-inline: false !default;
$font-face-files-type-discovered: eot woff ttf svg !default;
$font-face-apply-tricks: eot svg !default;
@mixin font-face(
$name,
$location: $name,
$weight: null,
$style: null,
$inline: $font-face-inline,
$files-type: $font-face-files-type-discovered,
$apply-tricks: $font-face-apply-tricks
) {
// if no id specified, suppose id is the name
$id: $name;
// but we try to explod $name: name #fontId;
@if length($name) > 1 {
$name: nth($name, 1);
$id: nth($name, 2);
}
// get all available font files in the location
$files: discover_font_files($location, $files-type, $apply-tricks, $id);
@font-face {
font-family: quote($name);
src: font-files($font-files);
font: {
weight: $weight;
style: $style;
}
}
}
@mirisuzanne
Copy link

I like it. Thanks for working on this! A few comments:

  1. It looks like $id may or may not have a preceding "#" when it is passed to your discover_font_files function. Does the function take care of that?
  2. What does $font-face-apply-tricks do exactly? (Also, I think it should be file-types rather than files-type).
  3. I wonder if we could use lists to get this even simpler. Something like:
@mixin font-face(
  $name, // <name> [<id> <font-weight> <font-style>]
  $location: $name,
  $inline: $font-face-inline,
  $files-type: $font-face-files-type-discovered,
  $apply-tricks: $font-face-apply-tricks
) { ... }
// "myFont normal" == font-weight: normal; font-style: normal;
// "myFont italic" == font-style: italic;
// "myFont normal italic" == font-weight: normal; font-style: italic;
// etc.

Now that I look more closely, there is a strong chance already that $name is a list, in which case we need to take only the 1st value of that list for our default $location

If everything else is working as needed, I'm happy to keep exploring the Sass side of things. Thanks again for the great contribution!

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