How to manage fonts properly with bower / grunt

Question

In my project, I added several projects that use fonts to my bower.json:

• fontawesome
• self-loading
• Roboto fontface

A Grunt file is mainly generated using "yo angular" with some custom changes. Fonts work fine in the "grunt serve" development mode, but do not work when I build my grunt.

The problem is that fonts are not copied to the dist folder. To fix this, I manually changed my Gruntfile to copy: dist all my fonts. Like this:

{ expand: true, cwd: "<%= yeoman.app %>/bower_components/bootstrap/dist/fonts", dest: "<%= yeoman.dist %>/fonts", src: ["*.*"] } 

My problem is that all my CSS libraries expect the fonts to be in a specific folder (roboto-fontface and bootstrap, for example, expect the font to be in different folders).

So, I have to modify my grunt file to replace the font link in the * .css files in order to configure the correct paths. I don’t know how to do it yet, but my main itch is that it seems very “hacked”

Bower works fine with my css files: they are automatically added to index.html and their href is replaced correctly when my dist build is done. For example, I can update the ng-grid project without problems, delete and add new projects. I believe this works because of the bower.json file in the ng-grid project that contains

  "main": ["./ng-grid.css", "./build/ng-grid.js"] 

The soil is set up correctly to figure this out and add it to my index.html.

But for fonts, it seems the only solution is to change my grunt file to add copy: dist, and then some replacement of the regular expressions with my * css files. But, for example, the bower.json file of the roboto-fontface project also has a good “main” one, where all fonts are listed in addition to the css file.

It seems logical to me that I should configure my Gruntfile so that it understands that the "main" parameter has fonts and automatically copies them to my dist / and replaces my css files with the correct path.

When I add a new font to my project, I will have to edit my Gruntfile, also when I delete / update fonts.

So the question is simple: how do I best manage my project fonts? What are the best practices? How do cool kids do it?

Answer 1

I came across this question a few weeks ago, I also used yeoman-angular-generator and had to also edit the copy: dist.

In my project, I used 3 separate fonts, font-awesome , lato and open-sans . I added font-awesome via bower, and the other 2 I manually downloaded them and placed them under app/fonts

 copy: { dist: { files: [{ expand: true, dot: true, cwd: '<%= yeoman.app %>', dest: '<%= yeoman.dist %>', src: [ '*.{ico,png,txt}', '.htaccess', '*.html', 'views/{,*/}*.html', 'images/{,*/}*.{png, jpg, jpeg, gif,webp}', //any new font you drop under app/fonts will be copied to dist 'fonts/**' ] }, { expand: true, cwd: '.tmp/images', dest: '<%= yeoman.dist %>/images', src: ['generated/*'] }, { expand: true, cwd: '.', src: 'bower_components/bootstrap-sass-official/assets/fonts/bootstrap/*', dest: '<%= yeoman.dist %>' }, { expand: true, dot: true, cwd: 'bower_components/font-awesome', src: ['fonts/*.*'], dest: '<%= yeoman.dist %>' }] }, styles: { expand: true, cwd: '<%= yeoman.app %>/styles', dest: '.tmp/styles/', src: '{,*/}*.css' } }, //rest of Gruntfile... 

Hope this helps!