access_time 4 months ago languageEnglish
more_vert

Download Google Fonts via Gulp

visibility 54 comment 0

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.

info Last modified by Raymond 4 months ago copyright This page is subject to Site terms.
Like this article?
Share on

Please log in or register to comment.

account_circle Log in person_add Register

Log in with external accounts

Follow Kontext

Get our latest updates on LinkedIn or Twitter.

Want to contribute on Kontext to help others?

Learn more