CODEWITHSUNDEEP
gruntjsbower
Paulo Duarte
Paulo Duarte

Reputation: 93

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

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.

Upvotes: 6

Views: 8063

Answers (4)

dshgna
dshgna

Reputation: 842

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.

Upvotes: 7

Michael
Michael

Reputation: 1522

Another solution would be to use grunt instead of bower to manage your fonts. I found two grunt plugins which download fonts from Google for you.

grunt-local-googlefont and grunt-goog-webfont-dl. You can install them via npm.

There are lots of different plugins to download fonts from other sources. Just search for font at grunt's plugin search.

Upvotes: 1

Michael
Michael

Reputation: 1522

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

Upvotes: 7

user4280396
user4280396

Reputation:

What you could do, instead of managing it with bower, is add in google code directly into your CSS or SCSS @import url(http://fonts.googleapis.com/css?family=Raleway) or manually add the font by first downloading the font then adding the relative path into your css.

You can download raleway here http://www.google.com/fonts#UsePlace:use/Collection:Raleway, clicking on the down arrow on the top right of the page, unzipping and add the fonts to your site.

Upvotes: 3

Related Questions