https://github.com/daniel-araujo/fontfacegen-webpack-plugin
A plugin for webpack that allows you to convert .ttf and .otf files into various other font formats such as .eot, .ttf, .svg, .woff and .woff2 using the existing NPM package fontfacegen.
https://github.com/daniel-araujo/fontfacegen-webpack-plugin
convert eot font font-formats generate otf plugin svg ttf webpack woff woff2
Last synced: 23 days ago
JSON representation
A plugin for webpack that allows you to convert .ttf and .otf files into various other font formats such as .eot, .ttf, .svg, .woff and .woff2 using the existing NPM package fontfacegen.
- Host: GitHub
- URL: https://github.com/daniel-araujo/fontfacegen-webpack-plugin
- Owner: daniel-araujo
- License: mit
- Created: 2019-10-31T21:41:29.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2023-01-07T19:19:02.000Z (over 2 years ago)
- Last Synced: 2025-03-31T23:02:01.398Z (about 1 month ago)
- Topics: convert, eot, font, font-formats, generate, otf, plugin, svg, ttf, webpack, woff, woff2
- Language: JavaScript
- Homepage:
- Size: 420 KB
- Stars: 21
- Watchers: 2
- Forks: 0
- Open Issues: 13
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# fontfacegen-webpack-plugin
This plugin allows you to convert .ttf and .otf files into various other font
formats such as .eot, .ttf, .svg, .woff and .woff2 using the existing NPM
package `fontfacegen`.
```
fontfacegen
fontfile.ttf ---------------> fontfile.ttf
fontfile.eot
fontfile.svg
fontfile.woff
fontfile.woff2
```
## Install
```
npm install fontfacegen
npm install fontfacegen-webpack-plugin
```
## Usage
Require the module `fontfacegen-webpack-plugin`, create an instance of
`FontfacegenWebpackPlugin` and pass the instance to the plugins array.
```js
const FontfacegenWebpackPlugin = require('fontfacegen-webpack-plugin')
module.exports = {
entry: 'index.js',
output: {
path: 'dist',
filename: 'index_bundle.js'
},
plugins: [
new FontfacegenWebpackPlugin({ tasks: ['fontfile.ttf', 'anotherfont.otf'] })
]
}
```
This will generate the following files:
- `dist/fontfile.eot`
- `dist/fontfile.ttf`
- `dist/fontfile.svg`
- `dist/fontfile.woff`
- `dist/fontfile.woff2`
- `dist/anotherfont.eot`
- `dist/anotherfont.ttf`
- `dist/anotherfont.svg`
- `dist/anotherfont.woff`
- `dist/anotherfont.woff2`
You can then reference these files in your code.
```css
@font-face {
src: url("dist/fontfile.eot");
src: url("dist/fontfile.eot?#iefix") format("embedded-opentype"),
url("dist/fontfile.woff2") format("woff2"),
url("dist/fontfile.woff") format("woff"),
url("dist/fontfile.ttf") format("ttf"),
url("dist/fontfile.svg") format("svg");
font-family: fontfile;
font-style: normal;
font-weight: normal;
}
@font-face {
src: url("dist/anotherfont.eot");
src: url("dist/anotherfont.eot?#iefix") format("embedded-opentype"),
url("dist/anotherfont.woff2") format("woff2"),
url("dist/anotherfont.woff") format("woff"),
url("dist/anotherfont.ttf") format("ttf"),
url("dist/anotherfont.svg") format("svg");
font-family: anotherfont;
font-style: normal;
font-weight: normal;
}
```
## Documentation
The `fontfacegen-webpack-plugin` module default exports a single class:
`FontfacegenWebpackPlugin`
An instance of this object is passed to the plugins array of webpack's config
options.
The constructor takes an object as its first argument:
| Property | Description |
|----------|---------------------------------------------------------------------------------------------|
| tasks | Array of directories or file paths. |
| | - Directory: Files with the extension `.ttf` and `.otf` in the directory will be converted. |
| | - File. That single file will be converted. |
| subset | A string or array with the characters desired to be included inside the generated fonts. |
## Contributing
The easiest way to contribute is by starring this project on GitHub!
https://github.com/daniel-araujo/fontfacegen-webpack-plugin
If you've found a bug, would like to suggest a feature or need some help, feel
free to create an issue on GitHub:
https://github.com/daniel-araujo/fontfacegen-webpack-plugin/issues