GithubHelp home page GithubHelp logo

dancon / gulp-inline-fonts Goto Github PK

View Code? Open in Web Editor NEW

This project forked from jalkoby/gulp-inline-fonts

0.0 1.0 0.0 9 KB

Convert your fonts into a css with base64

License: MIT License

JavaScript 100.00%

gulp-inline-fonts's Introduction

gulp-inline-fonts

Build Status npm version

The plug-in converts fonts into a standalone css file. The primary use-case is to make one file stylesheet when you have a custom fonts.

Installation

Install package with NPM and add it to your development dependencies:

npm i --save-dev gulp-inline-fonts

Examples of usage

An icon font

Let's suppose you have a custom icon font inside assets/fonts/icons/ directory and want to include it inline into the stylesheets. To do it just add the follow into gulpfile.js:

  var gulp = require('gulp'),
    inlineFonts = require('gulp-inline-fonts');

  gulp.task('icons', function() {
    return gulp.src(['assets/fonts/icons/*'])
      .pipe(inlineFonts({ name: 'icons' }))
      .pipe(gulp.dest('dist/fonts/'));
  });

The plug-in will take supported formats(.woff & .woff2 by default), convert them into base64 and write into dist/fonts/icons.css next:

  @font-face {
    font-family: "icons";
    font-style: normal;
    font-weight: 400;
    src: local("icons"), url("data:application/font-woff;base64,...") format("woff"),
      url("data:application/font-woff2;base64,...") format("woff2");
  }

A custom type font

In contrast to the icon font example a custom type font frequently has a few weights and styles (normal, bold, italic & etc) like below:

$: ls src/fonts/thesans
200.woff   # light
200-i.woff # italic light
400.woff   # normal
400-i.woff # italic
700.woff   # bold
700-i.woff # italic bold

To compile them into a single css file add this code:

var gulp = require('gulp'),
  inline = require('gulp-inline-fonts'),
  concat = require('gulp-concat'),
  merge  = require('merge-stream');

gulp.task('fonts', function() {
  // create an accumulated stream
  var fontStream = merge();

  [200, 400, 700].forEach(function(weight) {
    // a regular version
    fontStream.add(gulp.src(`src/fonts/thesans/${weight}.woff`)
                    .pipe(inline({ name: 'thesans', weight: weight, formats: ['woff'] })));

    // an italic version
    fontStream.add(gulp.src(`src/fonts/thesans/${weight}-i.woff`)
                    .pipe(inline({ name: 'thesans', weight: weight, formats: ['woff'], style: 'italic' })));
  });

  return fontStream.pipe(concat('thesans.css')).pipe(gulp.dest('build'));
});

Default options

{
  name: 'font',
  style: 'normal',
  weight: 400,
  formats: ['woff', 'woff2'] // also supported: 'ttf', 'eot', 'otf', 'svg'
}

Other solutions

gulp-inline-fonts's People

Contributors

alexeymohnatkin avatar anagorsky avatar jalkoby 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.