https://github.com/cahnory/webpack-fontface
Webpack font-face generator
https://github.com/cahnory/webpack-fontface
Last synced: 12 months ago
JSON representation
Webpack font-face generator
- Host: GitHub
- URL: https://github.com/cahnory/webpack-fontface
- Owner: cahnory
- License: mit
- Created: 2021-02-19T09:12:36.000Z (over 5 years ago)
- Default Branch: main
- Last Pushed: 2021-10-09T12:13:58.000Z (over 4 years ago)
- Last Synced: 2025-05-26T03:53:23.848Z (about 1 year ago)
- Language: JavaScript
- Size: 75.2 KB
- Stars: 3
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
README
webpack-fontface
This plugin generates a css @font-face rule and the alternatives font formats when importing a font file in ttf format.
- [x] generate *eot* font
- [x] generate *svg* font
- [x] generate *woff* font
- [x] generate *woff2* font
- [x] extract font family, style and weight from font file
- [x] generate *@font-face* css rule
- [x] support *@font-face* local src
- [x] support *@font-face* descriptors
- [x] returns font family, style and weight to the js
## Install
Using npm:
```sh
npm install webpack-fontface --save-dev
```
## Usage
Add the plugin to your webpack config file:
```js
const WebpackFontfacePlugin = require('webpack-fontface');
const options = { ... };
module.exports = {
...
plugins: [
new WebpackFontfacePlugin(options)
]
};
```
And import a font from your app:
```js
const { fontFamily, fontStyle, fontWeight } from './Roboto-LightItalic.ttf';
console.log(fontFamily); // "Roboto"
console.log(fontStyle); // "italic"
console.log(fontWeight); // 300
```
By default all files with a *.ttf* extension will be processed.
### Options
#### `virtualPath`
Type: `String`
Default: `'__GENERATED_WEBPACK_FONTFACE__'`
The path where are written the generated css and font files. The path could be absolute or relative to the compiler context.
Even if the files are written to memory, you must ensure that their path does not collide with existing files.
#### `rules`
Type: `Array`
Default: `[DefaultRule]`
List of rules for *@font-face* generation. When a module is imported, the first rule with a successful test is used to process it. If no rule test is successful, the module is ignored.
The *DefaultRule* takes this shape:
```js
{
test: /\.ttf$/,
useEot: true,
useSvg: true,
useTtf: true,
useWoff: true,
useWoff2: true,
descriptors: {},
locals: [],
}
```
#### `rules[*].test`
Type: `RegExp`
Default: `/\.ttf$/`
Used to check from its path whether an imported module is a font to process.
#### `rules[*].useEot`
Type: `Boolean`
Default: `true`
If *eot* font should be generated and used as a source by the *@font-face*.
#### `rules[*].useSvg`
Type: `Boolean`
Default: `true`
If *svg* font should be generated and used as a source by the *@font-face*.
#### `rules[*].useTtf`
Type: `Boolean`
Default: `true`
If *ttf* font should be generated and used as a source by the *@font-face*.
#### `rules[*].useWoff`
Type: `Boolean`
Default: `true`
If *woff* font should be generated and used as a source by the *@font-face*.
#### `rules[*].useWoff2`
Type: `Boolean`
Default: `true`
If *woff2* font should be generated and used as a source by the *@font-face*.
#### `rules[*].descriptors`
Type: `Object`
Default: `{}`
An object containing *@font-face* descriptors with camelCase names. Eight descriptors are supported:
- fontDisplay
- fontFamily *
- fontStretch
- fontStyle *
- fontWeight *
- fontVariant
- fontFeatureSettings
- fontVariationSettings
* If not defined, these descriptors are extracted from the font file.
[More about descriptors](https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face#descriptors)
#### `rules[*].locals`
Type: `Array`
Default: `[]`
A list of font names to be used as local sources by the *@font-face*.
[More about local sources](https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face#description)