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
).
Create a package.json
that points to your new font.
Use your font in CSS.
;
Control which variants are included.
;
Use your font in JavaScript.
var myfont = ;console; // { name: "Proxima Nova", files: [...] }
Example
npm linkcd examplenpm installnpm link font-loaderwebpack
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