gulp-fontfacegen-extended

gulp-fontfacegen-extended is a bit modified gulp-fontfacegen plugin. It generates CSS file with @font-face rules for modern browsers (woff, woff2 formats) based on keywords in font filename. *notice: it doesn't convert font in different formats, use fonter/ttf2woff2/etc to do it;

What is the difference?

• You can specify fonts destination folder
• Formatted font names remain unchanged

Install

$ npm install --save-dev gulp-fontfacegen-extended

Usage

import { src, dest } from "gulp";
import fontfaceGen from "gulp-fontfacegen-extended";

export const fonts = () => {
  return src("./src/font/*.{eot,ttf,otf,otc,ttc,woff,woff2,svg}")
        // Transform your fonts: fonter/ttf2woff2/etc
        .pipe(dest("./public/font"))
        .pipe(
            fontfaceGen()
                // or
            fontfaceGen({
                filepath: "./public/css",
                filename: "fontfacerules.css",
                destpath: "../fonts",
             })
        )
}

API

fontfaceGen(options?)

options

Type: object

filepath

Type: string Default: "./src/css/partial"

Destination folder where @font-face CSS rules should be created.

filename

Type: string Default: "fonts.css"

Name of file with @font-face CSS rules.

destpath

Type: string Default: "../fonts"

Destination folder where fonts are located.

Example

• Input font names:

../fonts/brioso_pro_v26-Italic Semibold.woff
../fonts/TTCommons-Medium.woff

• Output file contents:

@font-face {
	font-family: 'Brioso Pro';
	font-style: italic;
	font-weight: 600;
	src: local(''),
	url("../fonts/brioso_pro_v26-Italic Semibold.woff2") format("woff2"),
	url("../fonts/brioso_pro_v26-Italic Semibold.woff") format("woff");
	font-display: swap;
}
@font-face {
	font-family: 'TTCommons';
	font-style: normal;
	font-weight: 500;
	src: local(''),
	url("../fonts/TTCommons-Medium.woff2") format("woff2"),
	url("../fonts/TTCommons-Medium.woff") format("woff");
	font-display: swap;
}

Features

• checks if CSS file already exists;
• creates folder for CSS file;
• prevents @font-face rules duplicates while processing fonts with same name (it could happen with same name fonts but different extensions);
• font-family is generated by excluding font-style, font-weight, font version (v9, v10, v25, etc) and language charset keywords from filename;
• possible font-style values: italic, oblique, normal;
• possible font-weight values: 100, 200, 300, 400, 500, 600, 700, 800, 900, 950;