How to install custom fonts using Bower? (not awesome font)

Question

I use Bower and have already installed Font Awesome with it, but now I am wondering if I can install my own font (more specifically: Raleway and Montserrat) using Bower. Can I do it?

I did some research, but I did not find any solution! If possible, please tell me.

Answer 1

Raleway included in the bower TypoPRO package.

Install it with

 bower install --save typopro 

Since you're new to bower, here are some more tips:

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

Add the 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 bower:install task will run bower install and copy all the files from web/TypoPRO-Raleway to vendor/fonts ( vendor from targetDir to Gruntfile.js and fonts from exportsOverride to bower.json ). You can complete the task with

 $ grunt bower:install 

Since bower:install registered as the default job, you can also use the abbreviation:

 $ grunt 

Answer 2

The best solution I found with Bower was the Google Fonts Bower Proxy ( Github source). You will need to get the query string first 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 your requirements, it may be easier to simply import the font into your CSS or SASS instead of going for a baure based solution.

There is also a google fonts font package that includes all fonts.

Answer 3

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

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

Answer 4

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

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

There are many different plugins for downloading fonts from other sources. Just search for font in your grunt plugin search .