Foundation-sites: [Mixins] Font Face Mixin

[IamManchanda]

I want to add a mixin called font-face within http://foundation.zurb.com/sites/docs/sass-mixins.html

/// Generate a font-face declaration with multiple file formats.
/// @param {String} $font-name[] - Font family name
/// @param {String} $file-name[] - File name (no extension)
/// @param {String | Number} $weight [normal] - Font weight, defaults to `normal`
/// @param {String} $style [normal] - Font style, defaults to `normal`
@mixin font-face (
  $font-name, 
  $file-name, 
  $weight: normal, 
  $style: normal
) {
  @font-face {
    font-family: quote($font-name);
    src: url($file-name + '.eot');
    src: url($file-name + '.eot?#iefix')  format('embedded-opentype'),
         url($file-name + '.woff2') format('woff2'),
         url($file-name + '.woff') format('woff'),
         url($file-name + '.ttf')  format('truetype'),
         url($file-name + '.svg##{$font-name}')  format('svg');
    font-weight: $weight;
    font-style: $style;
  }
}

Usage

@include font-face('fantasy', '/fonts/fantasy');

cc / @brettsmason @rafibomb @kball on whether i should do a PR or not !

[RamanCool]

This is a Very Nice Mixin.

[denisahac]

Not all fonts supports various formats. So any ability to specify the type of formats would be awesome.

[IamManchanda]

and the best thing can be used for both webfonts and icon fonts!
Proper maintenance @denisahac @RamanCool

[IamManchanda]

Not all fonts supports various formats. So any ability to specify the type of formats would be awesome.

You are right @denisahac ..... I agree with you
How about

@include font-face('fantasy', '/fonts/fantasy', $truetype:false);

and infact to make things smaller why not,

@include font-face('fantasy', '/fonts/fantasy', $ttf:false);

[IamManchanda]

@brettsmason ... can you help me here a bit here
I want to basically provide ability to customize the ability to specify the type of formats

Example

@include font-face('fantasy', '/fonts/fantasy', $ttf:false);

How can i go about it buddy ??

[kball]

@rafibomb do you want to jump in on this one?

[soulcreate]

good examples:
https://davidtheclark.github.io/scut/font-face.html
and
https://github.com/davidtheclark/scut/blob/v1.4.0/src/typography/_font-face.scss

[denisahac]

The links provided can actually make a great starting point for this specific implementation. @IamManchanda what's your thoughts and the status of your work with this regards? This could be great addition to the framework. Thanks @soulcreate

[IamManchanda]

Interesting ... superb catch @soulcreate

[soulcreate]

Please add version to paths, like font-awesome:

src: url('#{$fa-font-path}/fontawesome-webfont.eot?v=#{$fa-version}');

This is: #{$fa-version} help reload fonts in browser then you change font (add\update glyphs)

[JeremyEnglert]

Tabled for V7.

[christianmagill]

Bourbon has a font-face mixin that might be worth a look.

[DanielRuf]

Bourbon has a font-face mixin that might be worth a look.

Foundation Sites is also A Sass library and ships its own mixins.
We will not include another Sass / Ruby dependency.