Font handling in FUI components

readme.md

How the fonts are supposed to work

1. Place the font files under src/scss/fonts
2. If the font is FontAwesome, it must be named fontawesome-webfont.*
3. Include the fonts with the $font-face compass mixin, do not specify a path in the mixin
4. Specify { font: build/fonts } in your compass config
5. Modify your gulpfile.js, so that the build and distribution steps copy the fonts to build/, and dist/

If you did everything well:

1. Gulp should never complain about missing font files
2. Your example pages for the component should show the fonts correctly
3. Other componenets that embed your component should display the fonts correctly

Examples

SCSS file:

@import "compass/css3/font-face";

@include font-face("FontAwesome", font-files("fontawesome-webfont.woff", "fontawesome-webfont.ttf", "fontawesome-webfont.svg", "fontawesome-webfont.eot"));

gulpfile.js

// compass config
return gulp.src('./src/scss/*.scss')
    .pipe(compass({
        project: __dirname,
        sass: 'src/scss',
        css: 'build',
        font: 'build/fonts'
    }));

// build step
gulp.task('copy-fonts-build', function () {
    return gulp.src(__dirname + '/src/scss/fonts/*')
    .pipe(gulp.dest(__dirname + '/build/fonts'));
});

// dist step
gulp.task('copy-fonts-dist', function () {
    return gulp.src(__dirname + '/src/scss/fonts/*')
    .pipe(gulp.dest(__dirname + '/dist/fonts'));
});