Remote Imported Fonts with Gulp

Question

So, I notice that my current Gulp installation does not import deleted 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, 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 use gulp-minify-css , which uses clean-css. I know that there may be something you need to do to get the remote import to work correctly, but reading the documents left me with more questions than answers. Here is the section of my Gulp file that handles 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 the lack of sass for importing 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

For your example, you can also consider the 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']);