Added modified version of @davidnormo's original font-face PR, release

version 1.0.12

README.md

@@ -1,4 +1,4 @@
-Ribs v1.0.11
+Ribs v1.0.12
 =============
 > Ribs is the evolution of Skeleton, the original author seems to have disappeared and/or lost interest in the project, and my colleagues and I use this an awful lot.
 
@@ -50,6 +50,7 @@ Then following that, from the root dir of this project, run `npm install` which
 You should be good to go.
 
 ## Changelog
+* Mar 9, 2014 - (v1.0.12) Added modified version of @davidnormo's font-face mixin PR
 * Oct 17, 2013 - (v1.0.11) Renamed component.json to bower.json due to deprecation
 * Oct 15, 2013 - (v1.0.10) Resolved some issues with the grid system (Switched to margins for push/pull and removed tablet specific alpha and omega classes), Added a couple of example files.
 * Oct 15, 2013 - (v1.0.9) Default flag added to variables - Thanks to Ivo Bathke (@ivoba)

bower.json

@@ -1,6 +1,6 @@
 {
   "name": "Ribs",
-  "version": "1.0.11",
+  "version": "1.0.12",
   "main": "build/css/Ribs.css",
   "ignore": [
     "**/.*",

build/css/Ribs.css

@@ -347,6 +347,10 @@ table {
   border-collapse: collapse;
   border-spacing: 0; }
 
+/*
+EXAMPLE - Declare Open Sans font-face (Remember to add the font files to $font_path)
+@include declare-font-face("Open Sans", "opensans-regular-webfont");
+*/
 body {
   background: #fff;
   font: 14px/21px "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;

package.json

@@ -2,7 +2,7 @@
   "name": "Ribs",
   "title": "Ribs",
   "description": "The evolution of Skeleton: A Beautiful Boilerplate for Responsive, Mobile-Friendly Development.",
-  "version": "1.0.11",
+  "version": "1.0.12",
   "homepage": "https://github.com/nickpack/Ribs",
   "author": {
     "name": "Nick Pack",

src/scss/Ribs.scss

@@ -13,6 +13,11 @@
 @import "normalize/_normalize";
 @import "_mixins";
 
+/*
+EXAMPLE - Declare Open Sans font-face (Remember to add the font files to $font_path)
+@include declare-font-face("Open Sans", "opensans-regular-webfont");
+*/
+
 // #General body style
 body {
   background: #fff;

src/scss/_mixins.scss

@@ -212,3 +212,19 @@
   display: none !important;
   visibility: hidden;
 }
+
+// @see http://pivotallabs.com/bulletproof-font-face-syntax-with-sass/
+// @see http://www.fontspring.com/blog/the-new-bulletproof-font-face-syntax
+@mixin declare-font-face($font_family, $font_filename, $font_weight : normal, $font_style :normal, $font_stretch : normal, $font_path: $font_path) {
+   @font-face {
+      font-family: '#{$font_family}';
+      src: url('#{$font_path}#{$font_filename}.eot?#iefix') format('embedded-opentype'),
+           url('#{$font_path}#{$font_filename}.woff') format('woff'),
+           url('#{$font_path}#{$font_filename}.ttf') format('truetype'),
+           url('#{$font_path}#{$font_filename}.svg##{$font_family}') format('svg');
+
+      font-weight: $font-weight;
+      font-style: $font-style;
+      font-stretch: $font-stretch;
+   }
+}

src/scss/_variables.scss

@@ -123,6 +123,8 @@ $paragraph_lead_line_height: $paragraph_lead_font_size * 1.5 !default;
 $paragraph_lead_colour: #777 !default;
 
 // #General Text
+$font_path: "../fonts/";
+
 $em_font_style: italic !default;
 
 $small_font_size: 80% !default;