Remote Import Fonts with Gulp

Question

So I'm noticing that my current Gulp setup isn't importing remote fonts such as google fonts. In my main.scss file I have:

@import url(https://fonts.googleapis.com/css?family=Lato:400,100,100italic,300,300italic,700,700italic,400italic,900,900italic);

And when it compiles minified it looks something like this:

@font-face{font-family:Lato;font-style:normal;font-weight:100;src:local('Lato Hairline'),local('Lato-Hairline'),url(../../fonts.gstatic.com/s/lato/v11/zJY4gsxBiSo5L7tNutxFNg.ttf) format('truetype')}

I'm using gulp-minify-css which uses clean-css. I know there may be something you have to do to get remote imports to work correctly but reading the docs left me with more questions then answers. Here is a section of my gulp file that handles the Sass/CSS minification:

// Minimize CSS
gulp.task('minify-css', function() {
  return gulp.src('css/src/*.css')
    .pipe(minifyCss({
        compatibility: 'ie8',
        aggressiveMerging: false
        }))
    .pipe(gulp.dest('css/'));
});

Any help would be appreciated! Thanks.

Answer 1

Your Problem is due to the lack of sass to import css files. You need to copy the css file and rename it to a *.scss file. The scss file can be imported correctly.

You will need to install and require gulp-rename: https://www.npmjs.com/package/gulp-rename

In the case of your example you could also consider to user gulp-google-webfonts: https://www.npmjs.com/package/gulp-google-webfonts

fonts.list:

Lato:400,100,100italic,300,300italic,700,700italic,400italic,900,900italic

gulpfile.js:

var gulp = require('gulp');
var googleWebFonts = require('gulp-google-webfonts');

var options = { };

gulp.task('fonts', function () {
    return gulp.src('./fonts.list')
        .pipe(googleWebFonts(options))
        .pipe(gulp.dest('out/fonts'))
        ;
    });

gulp.task('default', ['fonts']);