Download Google Fonts via Gulp

access_time 22 days ago visibility8 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 22 days 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 publish your article on Kontext?

Learn more

More from Kontext

visibility 8
thumb_up 0
access_time 22 days ago

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. Node.js ...

visibility 22
thumb_up 0
access_time 2 years ago

JSON is commonly used in modern applications for data storage and transfers. Pretty much all programming languages provide APIs to parse JSON. 

Bootstrap 4 Mega Full Width Dropdown Menu
visibility 2913
thumb_up 2
access_time 9 months ago

On Kontext, a full width mega dropdown menu is implemented using Bootstrap 4. If you'd like to implement similar menus, please follow these steps.  The following code snippets work with Bootstrap 4.4.1. It should also work with other 4.x versions but I didn't test it.  The new CSS class ...