Code Monkey home page Code Monkey logo

gulp-google-webfonts's Introduction

gulp-google-webfonts

A gulp plugin to download Google webfonts and generate a stylesheet for them.

Input

fonts.list

Oswald:400,700
Roboto:400,500,700,400italic,500italic,700italic

gulpfile.js

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

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

Output

gulp fonts

ls out/fonts/

fonts.css
Oswald-normal-400.woff
Oswald-normal-700.woff
Roboto-italic-400.woff
Roboto-italic-500.woff
Roboto-italic-700.woff
Roboto-normal-400.woff
Roboto-normal-500.woff
Roboto-normal-700.woff

out/fonts/fonts.css

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

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

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

@font-face {
	font-family: 'Roboto';
	font-style: normal;
	font-weight: 500;
	src: url(Roboto-normal-500.woff) format('woff');
}

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

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

@font-face {
	font-family: 'Roboto';
	font-style: italic;
	font-weight: 500;
	src: url(Roboto-italic-500.woff) format('woff');
}

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

gulp-google-webfonts's People

Contributors

astanciu avatar battlesnake avatar rdy avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.