gulp-rt-font-config

Create CSS of base64 encoded font files and generate icon font with reference sheet

Usage

First, install gulp-rt-font-config as a development dependency:

Then, add it to your gulpfile.js:

var gulp = require('gulp');
var rtFonts = require('gulp-rt-font-config');
var cssminify = require('gulp-minify-css');

gulp.task('fontconfig', function() {

	gulp.src('fonts.json')

		.pipe(rtFonts.fromConfig({

			concat : "my-fonts.css",

			reference : true
		}))

		// you may want to minify the output (won't save you much size, just stripping newlines, spaces, its already base64 encoded)
		.pipe(cssminify())

		.pipe(gulp.dest('complete'));
});

gulp.task('default', [
	'fontconfig'
]);

Options

concat - (false | true | string) If false, individual css files created for each font in the config If true, fonts are combined into one file using the font families for the filename If string, fonts are combined into one file using name provided

reference - (false | true) If true will generate html pages showing character classes and icons (for icon fonts), or text with weights and styles for text fonts. If concat is true, will combine font reference sheets into one document.

Configuration

You'll use a json file to configure your font bundle. This is what a sample might look like:

{
	"name": "Some Websites Font Bundle",
	"fonts" : []
}

The type of fonts you can add are:

Standard Text Font

These can be woff, ttf, or otf files. They are essentially opened, base64 encoded and created as an @font-face declaration

"fonts" : [
	{
		"fontFamily" : "ITCAvantGarde",
		"subsets" : [
			{
				"fontWeight" : 100,
				"fontStyle" : "normal",
				"src" : "src/fonts/ITCAvantGardeStd-Light.woff"
			},
			{
				"fontWeight" : 800,
				"fontStyle" : "normal",
				"src" : "src/fonts/ITCAvantGardeStd-Bold.woff"
			}
		]
	}
]

The output above would be:

@font-face{
	font-family:"ITCAvantGarde";
	font-style:normal;
	font-weight:100;
	src:url(data:application/font-woff;charset=utf-8;base64,(..base64StringOmmited...);
}
@font-face{
	font-family:"ITCAvantGarde";
	font-style:normal;
	font-weight:800;
	src:url(data:application/font-woff;charset=utf-8;base64,(..base64StringOmmited...);
}

Downloaded Icon Font

This would be an .svg font file downloaded from Fontastic, IcoMoon, etc

"fonts" : [
	{
		"fontFamily" : "FontAwesome",
		"classPrefix" : "fa-icon",
		"iconCSS" : true,
		"svgSrc" : "src/fonts/font-awesome.svg"
	}
]

The above output would be:

@font-face{
	font-family:"FontAwesome";
	font-weight:normal;
	font-style:normal;
	src:url(data:application/font-woff;charset=utf-8;base64,..base64StringOmmited...);
}
[data-fa-icon]::before,
[class^="fa-icon-"]::before,
[class*=" fa-icon-"]::before {
	font-family: "FontAwesome" !important;
	display: inline-block;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none !important;
	speak: none;
	line-height: 1;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}
[data-fa-icon]::before {
	content: attr(data-fa-icon);
}
.fa-icon-youtube::before { content:"b"; }
.fa-icon-facebook::before { content:"e"; }
.fa-icon-twitter::before { content:"f"; }

Custom Icon Font

This is a good way to manage your icon fonts and keep the state of it in your repository. You can add new glyphs by visiting Fontastic, finding the icon you want, inspect with the web inspector and copy the path value. The name of your glyph becomes the icon class. You can also get the SVG path from an Illustrator object, just ensure your artboard is 512x512 before generating the path and that you're exporting a compound object.

"fonts" : [
	{
		"fontFamily" : "MyCustomIconFontFamily",
		"classPrefix" : "icon",
		"glyphs" : {
			"youtube" : { "char" : "\\62", "d" : "M507 358c0 0-5 36-20 51-20 21-42 21-52 22-71 5-179 5-179 5l0 0c0 0-108 0-179-5-10-1-32-1-51-22-16-15-21-51-21-51 0 0-5-41-5-83l0-38c0-42 5-83 5-83 0 0 5-36 21-51 19-20 45-20 56-22 41-4 174-5 174-5 0 0 108 0 179 5 10 1 32 2 52 22 15 15 20 51 20 51 0 0 5 41 5 83l0 38c0 42-5 83-5 83z m-304-168l0 143 138-72z" },
			"facebook" : { "char" : "\\65", "d" : "M304 416l80 0 0 96-80 0c-62 0-112-50-112-112l0-48-64 0 0-96 64 0 0-256 96 0 0 256 80 0 16 96-96 0 0 48c0 9 7 16 16 16z" },
			"twitter" : { "char" : "\\66", "d" : "M512 399c-19-9-39-14-60-17 21 13 38 34 46 58-20-12-43-20-67-25-19 20-46 33-76 33-58 0-105-47-105-105 0-8 0-16 2-24-87 4-164 46-216 110-9-16-14-34-14-53 0-36 18-69 46-87-17 0-33 5-47 13 0-1 0-1 0-2 0-50 36-93 84-103-9-2-18-3-28-3-7 0-13 0-20 2 14-42 53-72 99-73-36-29-82-45-131-45-8 0-17 0-25 1 47-30 102-47 161-47 193 0 299 160 299 299 0 4 0 9 0 13 20 15 38 34 52 55z" }
		}
	}
]]]

The above output would be:

@font-face{
	font-family:"MyCustomIconFontFamily";
	font-weight:normal;
	font-style:normal;
	src:url(data:application/font-woff;charset=utf-8;base64,..base64StringOmmited...);
}
[data-icon]::before,
[class^="icon-"]::before,
[class*=" icon-"]::before {
	font-family: "MyCustomIconFontFamily" !important;
	display: inline-block;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none !important;
	speak: none;
	line-height: 1;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}
[data-icon]::before {
	content: attr(data-icon);
}
.icon-youtube::before { content:"\62"; }
.icon-facebook::before { content:"\65"; }
.icon-twitter::before { content:"\66"; }

Changelog

1.0.0

• Initial Dev Cycle

1.1.0

• patched empty reference sheet
• added iconCSS property to enable / disable generating the icon classes.