Download Google Fonts via Gulp

In Visual Studio projects, Gulp can be used to manage web application client resources such as CSS, fonts, JavaScript files and images and so on. This article provides guidance about download Google fonts into your project automatically via Gulp as part of project build or pre-publish.

Prerequisites

• Node.js

package.json

In your web application project, add package.json file which will be referenced by node.js. Specify dependency on package gulp-google-webfonts.

{
  "version": "1.0.0",
  "name": "asp.net",
  "private": true,
  "devDependencies": {
    "gulp": "^4.0.0",
    "gulp-concat": "2.6.1",
    "gulp-cssmin": "0.2.0",
    "gulp-uglify": "3.0.0",
    "rimraf": "2.6.1",
    "gulp-sass": "4.0.2",
    "gulp-google-webfonts": "4.0.0"
  },
  "dependencies": {
   ...
  }
}

fonts.list

Create a file named fonts.list with the fonts you'd like to download in application root folder:

Roboto:300,400,500,700
Open+Sans:300,400,600,700
Source+Code+Pro:200,300,400

In the above example, fonts Roboto, Open Sans and Source Code Pro will be downloaded with varied weights.

gulpfile.js

In Gulpfile.js file, create a task to download google fonts:

"use strict";

const gulp = require("gulp"),
    rimraf = require("rimraf"),
    concat = require("gulp-concat"),
    cssmin = require("gulp-cssmin"),
    uglify = require("gulp-uglify"),
    googleWebFonts = require('gulp-google-webfonts');

const paths = {
    webroot: "./wwwroot/",
    node_modules: "./node_modules/"
};

var googleFontsOptions = {
    fontsDir: './font',
    cssDir: '.',
    cssFilename: 'google-fonts.css'
};

gulp.task("download:font:google", () => {
    return gulp.src('./fonts.list')
        .pipe(googleWebFonts(googleFontsOptions))
        .pipe(gulp.dest(paths.webroot + "css/"));
});

Task download:font:google will download the fonts to folder wwwroot/css/font and the fonts CSS file will be named as 'google-fonts.css' in folder wwwroot/css.

Run the task

Go to Visual Studio menu View -> Other Window -> Task Runner Explorer. 

You will then find the task:

Right click on the task name to run the task.

Alternatively, you can directly call node.js command to run the task:

node node_modules\gulp\bin\gulp.js "download:font:google"

Embed the task into project build or publish pipeline

Add the following code snippet to Visual Studio project file to run the Gulp task before publishing project:

  <Target Name="PrepublishScriptAndCss" BeforeTargets="BeforePublish">
    <Exec Command="npm install" />
    <Exec Command="node node_modules\\gulp\\bin\\gulp.js download:font:google" />
  </Target>

The commands will first install all the dependent packages listed in package.json file and then run gulp task to download Google fonts.