Search code examples
cssgruntjsyeomanyeoman-generator-angular

Google font is not working when project is built with grunt

I'm using a Google font, which i declared in a .scss file:

@import "../../bower_components/bootstrap-sass-official/assets/stylesheets/bootstrap";
@import "../../bower_components/font-awesome/scss/font-awesome";
@import url(http://fonts.googleapis.com/css?family=Quicksand:400,300,700);
@import 'common';

It's working when the project is not built. But when I build it (uglify/minify). It's not working.

Before project is built:

enter image description here

After project is built:

enter image description here

I've used yeoman to schafold the project. This are the tasks that runs on 'build':

grunt.registerTask('build', [
    'clean:dist',
    'wiredep',
    'useminPrepare',
    'concurrent:dist',
    'autoprefixer',
    'concat',
    'ngAnnotate',
    'copy:dist',
    'cdnify',
    'cssmin',
    'uglify',
    'filerev',
    'usemin',
    'htmlmin'
  ]);

One of these must brake the google font somehow.

Solution

  • This happens when your CSS file is uglified and the @import url(http://fonts.googleapis.com/css?family=Quicksand:400,300,700); line gets concatenated against a previous line with no whitespace.

    While not ideal, I've found that creating a separate webfonts.scss file for these types of imports works around the problem (but creates an additional css file to load in your app)

    Alternatively, you can take the contents from the webfonts file and copy the @font-face rules directly into your stylesheets instead of using the @import. This seems to be less error prone.