6 months ago I created a protip called Absurdly Abstract @font-face mixin with the intention that it'd make including branded fonts easier. At the end of that article I noted that it was missing the ability to reference the font-style attribute.

I've revised the original script adding the font-style attribute. The original article was named "Absurdly Abstract", so in that spirit I've gone out of my way to abstract a touch more. I hope you like it.

Our Package

The total package includes:
* _defaults.scss
* _vars.scss
* _mixins.scss
* brand-face.scss

You can override anything you find in _defaults.scss within _vars.scss. I've included an example $brand-faces array within _vars.scss that you can follow. Here it is for easy reference:

Our Brand Faces Array

$brand-faces: 'Nexa' (
    ("nexa/nexa_regular-webfont", normal),
    ("nexa/nexa_regular-italics-webfont", normal, italic),
    ("nexa/nexa_bold-webfont", bold),
    ("nexa/nexa_black-webfont", bolder),
),
'TinFish' (
      ("font/tin-fish", bold),
      ("font/tin-fish", lighter),
      ("font/tin-fish", normal),
);

The key principle to remember within the array is this:

$brand-faces: '<font-name>' (
    ("<filename>", <weight>, <style>),
);

It's important to note as in the actual $brand-faces example. A font name can have multiple weight/style combinations. This is useful because within your css you can say font-family: 'nexa'; font-weight:bold; font-style:italic; With that being said. The font family you include within the $brand-faces array needs to support these features.

The Mixin

I'm going to explain each section of the main mixin and provide source towards the bottom.

This mixins name is:

@mixin brand-faces() {

In order to take advantage of cache busting we check to see if the Compass function current-time() is available. If not we fallback to whatever the sass default is.

@if function-exists('current-time') {
 $cache: '?'+#{current-time()};
}

The meat of the mixin is looping through our $brand-faces array. The format of this array is important so reference above or see _vars.scss for the exact structure.

// Loop through each "Family" (Families may have different weights, etc)
 @each $family in $brand-faces {

  $face-name: quote(#{nth($family, 1)});
  $face: nth($family, 2);

  @each $option in $face {
   @font-face {
    font-family: to-lower-case($face-name);

lowercase the font for consistency

src: url(nth($option, 2) + '.eot'+$cache);
src: url(nth($option, 2) + '.eot'+$cache+'#iefix') format('embedded-opentype'),
url(nth($option, 2) + '.woff'+$cache) format('woff'),
url(nth($option, 2) + '.ttf'+$cache) format('truetype'),
url(nth($option, 2) + '.svg'+$cache) format('svg');

apply our $cache from compile time

font-weight: nth($option, 1);

// If font-style value is supplied, apply that value, otherwise set it to normal
@if length($option) == 3 {
 font-style: nth($option, 3);
} @else {
 font-style: 'normal';
}

An important thing to point out is that if you are using a font that is naturally Italic, do not set the font style here or each browser will skew your font ** poorly **. This addition from the original article in intended to apply a full brand font family.

 }
}
.brand-face-#{nth($sequentials,index($brand-faces, $family))} {
 font-family: to-lower-case($face-name);
}

I chose to add a $sequentials variable because I realize $brand-face-quart might not appeal to everyone. Check out _vars.scss to see how I overrode the defaults to use roman numerals instead. Feel free to use whatever you want.

 }

}

@if $brand-faces != false {
 @include brand-faces();
}

This last piece lets you include this package, and if you don't set the $brand-faces array in variables, no styles will be added to you project.

Conclusion

As with the first article I wrote, I finished by adding a nice to have list. I know in my own projects now instead of having a class list of .brand-face-primary, .brand-face-alt, .brand-face-tert, etc... I use .brand-face-serif, .brand-face-serif-alt, .brand-face-sans, .brand-face-sans-alt, etc. In creating the array I felt that it became too deep and possibly confusing, so if you have feedback, I'm open to suggestions. With that:

The Source

You can find the complete source to this experiment on github, here:
https://github.com/drrobotnik/brand-face

Feedback

I've applied these concepts to my own projects based on my experience and opinions. I would love for you to apply this to your projects and give me your thoughts. I'd like to expand the concept of brand into the space of color, size, and other areas that are required but unique to each project.