How can I install custom fonts using Bower? (not Font Awesome)

Question

I'm using Bower, and already installed Font Awesome with it, but now I'm wondering if I can install a custom font (to be more specific: Raleway and Montserrat) using Bower. Can I do that?

I did some research but I didn't find any solution! If it is possible, please tell me how.

Answer 1

The best solution I found with Bower was the Google Fonts Bower Proxy (source on Github). You will have to first get the query string by going to Google fonts.

<link href='http://fonts.googleapis.com/css**?family=fontname:size**' rel='stylesheet' type='text/css'>

Then using Bower:

bower install --save https://google-fonts.azurewebsites.net/googleFonts/yourPackageName?family=fontname:size

Depending on the requirement, it may be actually easier to simply import the font to your CSS or SASS instead of going for the bower based solution.

There is also a google fonts bower package which includes all fonts.

Answer 2

Raleway is included in the bower package TypoPRO.

Install it with

bower install --save typopro

As you are new to bower, here some further tips:

As the bower_components directory is usually excluded from version control, you can copy the files you need to another directory with a grunt task.

Add a exportsOverride section to bower.json:

{
  (…)
  "dependencies": {
    "typopro": …
  },
  "exportsOverride": {
    "typopro": {
      "fonts": "web/TypoPRO-Raleway/*"
    }
  }
  (…)
}

Install grunt

$ npm install -g grunt-cli
$ npm install --save-dev grunt
$ npm install --save-dev grunt-bower-task

and create Gruntfile.js:

module.exports = function(grunt) {

  var path = require('path');

  grunt.initConfig({
    bower: {
      install: {
        options: {
          targetDir: 'vendor',
          cleanTargetDir: true,
          layout: function(type, component, source) {
            return type;
          }
        }
      }
    }
  });

  // These plugins provide necessary tasks.
  grunt.loadNpmTasks('grunt-bower-task');

  // Default task.
  grunt.registerTask('default', ['bower:install']);

};

The grunt task bower:install will run bower install and copy all files from web/TypoPRO-Raleway to vendor/fonts (vendor from targetDir in Gruntfile.js and fonts from exportsOverride in bower.json). You can execute the task with

$ grunt bower:install

As bower:install is registered as a default task, you can also use the short cut:

$ grunt