Longing to know

Earlier today I was playing around with Google’s Font API. I wanted to pull down OpenSans to host locally, but Google’s Font API is geared more toward utilizing Google’s hosting resources.

Starting with OpenSans, though, you can download the fonts, it seems:

https://www.google.com/fonts/specimen/Open+Sans

The problem, though, is that while you can download a zip of the fonts you have selected, only the *.ttf files are downloaded. If you then look at Google’s generated CSS files, you will see that they utilize *.woff resources. Why oh why doesn’t the zip I just downloaded include the *.woff files?

Fortunately, there is an npm gulp package that will take care of this for you called “gulp-google-webfonts.”

If you already have npm installed, then drop to a command prompt and install gulp along with the gulp package:

npm install --global gulp
npm install gulp-google-webfonts

Next, you create a couple of files to specify which fonts you want installed (this is mostly pulled directly from the gulp-google-webfonts site).

In my case, I wanted to pull down OpenSans. The two files I created reflect this.

fonts.list:

Open+Sans:400,400italic,600,600italic,700,700italic,800,800italic,300italic,300

gulpfile.js:

var gulp = require('gulp');
var googleWebFonts = require('gulp-google-webfonts');

var options = { };

gulp.task('fonts', function () {
	return gulp.src('./fonts.list')
		.pipe(googleWebFonts(options))
		.pipe(gulp.dest('out/fonts'))
		;
	});

gulp.task('default', ['fonts']);

With these two files created, we execute the command:

gulp fonts

Once this is executed, you will get the fonts and generated CSS in your “out” folder. The output includes just the (.wof files and the generated CSS looks like this:

@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 300;
    src: url(Open_Sans-normal-300.woff) format('woff');
}

@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 400;
    src: url(Open_Sans-normal-400.woff) format('woff');
}

@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 600;
    src: url(Open_Sans-normal-600.woff) format('woff');
}

@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 700;
    src: url(Open_Sans-normal-700.woff) format('woff');
}

@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 800;
    src: url(Open_Sans-normal-800.woff) format('woff');
}

@font-face {
    font-family: 'Open Sans';
    font-style: italic;
    font-weight: 300;
    src: url(Open_Sans-italic-300.woff) format('woff');
}

@font-face {
    font-family: 'Open Sans';
    font-style: italic;
    font-weight: 400;
    src: url(Open_Sans-italic-400.woff) format('woff');
}

@font-face {
    font-family: 'Open Sans';
    font-style: italic;
    font-weight: 600;
    src: url(Open_Sans-italic-600.woff) format('woff');
}

@font-face {
    font-family: 'Open Sans';
    font-style: italic;
    font-weight: 700;
    src: url(Open_Sans-italic-700.woff) format('woff');
}

@font-face {
    font-family: 'Open Sans';
    font-style: italic;
    font-weight: 800;
    src: url(Open_Sans-italic-800.woff) format('woff');
}

Once you pull the resources into your web project, you can host the fonts locally and utilize the font-family references with your other CSS styles.