When using compass-importer and gulp fonts are not being compiled correctly

Question

My issue is that I'm using compass-importer with gulp however my fonts are not displaying, it looks as though they are not being compiled correctly.

SASS

@font-face {
  font-family: "Mikado-Regular";
  src: font-files("../_fonts/Mikado/mikadoregular-webfont.woff", "../_fonts/Mikado/mikadoregular-webfont.woff2", "../_fonts/Mikado/mikadoregular-webfont.ttf"); 
}

Compiled CSS

@include font-face("Mikado-Regular", font-files("../_fonts/Mikado/mikadoregular-webfont.woff", "../_fonts/Mikado/mikadoregular-webfont.woff2", "../_fonts/Mikado/mikadoregular-webfont.ttf"));

It doesn't appear the font-face mixin is being pulled in correctly. However there are no errors.

I'm wonder if it's something to do with a config.rb file I have (as I was using Prepos previously, however there doesn't appear to be an option to include this with compass-importer.

What's strange is I've updated my SASS paths to be relative to the main.css so this config.rb file with the relative path shouldn't matter, I should still see the compiled font-face syntax and maybe even a 404 error with the browser looking for the font.

Part of my gulpfile.js is below:

var gulp = require('gulp');
var sass = require('gulp-sass');
var compass = require('compass-importer')
var autoprefixer = require('gulp-autoprefixer');
var browserSync = require('browser-sync').create();

// Setup SASS
gulp.task('sass', function() {
    return gulp.src('scss/main.scss')
    .pipe(sass({ importer: compass }).on('error', sass.logError))
    .pipe(autoprefixer('last 2 version', 'ie 10'))
    .pipe(sass().on('error', sass.logError))
    .pipe(sass({
            sourceComments: 'map',
            sourceMap: 'sass',
            outputStyle: 'expanded'
        }))
    .pipe(gulp.dest('../../public/skins/website/_css'))
    .pipe(browserSync.stream());
});

I've wanted to try and avoid using gulp-compass if possible only because I wanted to avoid installing Ruby.

Does anyone have any ideas?

Answer 1

It turns out that compass-importer doesn't process the file or include the correct mixin in the same way that using compass with ruby does. compass-importer doesn't use the config.rb file at all.

This is the _font-face mixin, it doesn't include the format type syntax for other font types.

@mixin font-face($name, $font-files, $eot: false, $weight: false, $style: false) {
  $iefont: unquote("#{$eot}?#iefix");
  @font-face {
    font-family: quote($name);
    @if $eot {
      src: font-url($eot);
      $font-files: font-url($iefont) unquote("format('embedded-opentype')"), $font-files;
    }
    src: $font-files;
    @if $weight {
      font-weight: $weight;
    }
    @if $style {
      font-style: $style;
    }
  }
}

My solution is to just update all my files to include the verbose CSS, as this way it's not dependant on either compass or compass-importer.

I could change the mixin but was worried that it would be overwritten should there be an update to compass-importer as I still need to include this.

@font-face {
    font-family: 'Mikado-Regular';
    src: url('../_fonts/Mikado/mikadoregular-webfont.eot');
    src: url('../_fonts/Mikado/mikadoregular-webfont.eot?#iefix') format('embedded-opentype'),
         url('../_fonts/Mikado/mikadoregular-webfont.woff2') format('woff2'),
         url('../_fonts/Mikado/mikadoregular-webfont.woff') format('woff'),
         url('../_fonts/Mikado/mikadoregular-webfont.ttf') format('truetype'),
         url('../_fonts/Mikado/mikadoregular-webfont.svg#intro_bold_capsregular') format('svg');
    font-weight: normal;
    font-style: normal;

}