font-loader's Introduction

font-loader

Use your fonts in webpack-based projects!

Usage

Add font-loader to your list of CSS loaders.

{
	modules: {
		loaders: [{
			test: /\.css$/,
			loaders: [
				'style',
				'css?importLoaders=1',
				'font?format[]=truetype&format[]=woff&format[]=embedded-opentype'
			]
		}]
	}
}

Create a font manifest file which describes the variants in the font and includes paths to their TTF/OTF/WOFF/etc. files. Variant metadata matches what is found in CSS (e.g. weight and style).

{
	"name": "Proxima Nova",
	"files": [{
		"weight": 100,
		"file": "./files/Proxima Nova Thin.otf"
	}, {
		"weight": 300,
		"file": "./files/Proxima Nova Light.otf"
	}, {
		"weight": 400,
		"file": "./files/Proxima Nova Reg.otf"
	}, {
		"weight": 500,
		"file": "./files/Proxima Nova Sbold.otf"
	}, {
		"weight": 700,
		"file": "./files/Proxima Nova Bold.otf"
	}, {
		"weight": 900,
		"file": "./files/Proxima Nova Xbold.otf"
	}]
}

Create a package.json that points to your new font.

{
	"name": "font-myfont",
	"main": "myfont.font.json"
}

Use your font in CSS.

@import "~font-myfont";

Control which variants are included.

@import "~font-myfont?weight[]=100&weight[]=500&format=woff";

Use your font in JavaScript.

var myfont = require('font-myfont');
console.log(myfont); // { name: "Proxima Nova", files: [...] }

Example

npm link
cd example
npm install
npm link font-loader
webpack

Configuration

Some stuff.

Thoughts:

Investigate if it's better to emit a single CSS file containing the font, and then have the loader resolve that as an "import" directive?
Fix assorted hackiness
WOFF2 support

Recommend Projects