https://github.com/sjorssnoeren/fontface-loader
Font-face loader for webpack. Just require a .ttf file (WIP)
https://github.com/sjorssnoeren/fontface-loader
font-face loader webpack
Last synced: about 1 year ago
JSON representation
Font-face loader for webpack. Just require a .ttf file (WIP)
- Host: GitHub
- URL: https://github.com/sjorssnoeren/fontface-loader
- Owner: sjorssnoeren
- License: mit
- Created: 2017-08-30T15:05:32.000Z (almost 9 years ago)
- Default Branch: master
- Last Pushed: 2020-11-01T18:48:12.000Z (over 5 years ago)
- Last Synced: 2025-03-19T18:51:23.847Z (over 1 year ago)
- Topics: font-face, loader, webpack
- Language: JavaScript
- Homepage:
- Size: 794 KB
- Stars: 9
- Watchers: 2
- Forks: 2
- Open Issues: 8
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
@font-face loader for webpack
=========
*This is currently a work in progress*
As of today, implementing font-faces is still a cumbersome task to do. Most of us go to an online conversion site to make it happen. With the current state of JavaScript, we must be able to do it quicker and simpler. Welcome @font-face loader for Webpack.
This is all it takes to add a font to your site. Just hand in a `.ttf` file. The other files as well as the matching CSS will be generated automatically (including `font-weight` and `font-style` properties) and will be loaded by webpack's css-loader.
```javascript
import './fonts/OpenSans-Light.ttf';
```
Creates this code:
```css
@font-face {
font-family: 'Open Sans';
font-weight: 300;
font-style: normal;
src: url(/dist/fonts/2c7d99f09db7c4c52ef7deb370977de8.eot);
src: url(/dist/fonts/0b356dcc9963fde4a504d49564f51449.woff2) format('woff2'),
url(/dist/fonts/9ff12f694e5951a6f51a9d63b05062e7.ttf) format('truetype'),
url(/dist/fonts/62e528f1c0050022d2d0be36d8247f9f.woff) format('woff');
}
```
## Installing
Firstly make sure you've installed webpack 3.0 or greater. (I've not yet tested this plugin with earlier versions). Run this line to install the fontface-loader. You may want to install css-loader and style-loader if you haven't done already so.
```
$ npm install fontface-loader --save
```
Add the following rules to your webpack configuration:
```javascript
{
test: /^(?!.*\.generated\.ttf$).*\.ttf$/,
use: ['css-loader', 'fontface-loader'],
}, {
test: /\.generated.(ttf|eot|woff|woff2)$/,
use: ['file-loader'],
},
```
Now you're good to go. Above you find the very minimal setup, it's however possible to customize using the webpack ExtractPlugin or file-loader options. For examples please view the examples directory.
### Configure output directory for fonts (using file-loader)
```javascript
{
test: /\.generated.(ttf|eot|woff|woff2)$/,
use: [{
loader: 'file-loader',
options: {
outputPath: '/fonts/',
},
}],
},
```
## Usage
**Note: your fonts are generated in the directory next to it's origin and then passed to the output target.**
Usage is as follows:
```javascript
import './fonts/OpenSans-Light.ttf';
```
It should be possible to use fonts from other npm packages, however this is not tested yet.
## How it works
1. Your font is fetched through the webpack and then passed to the loader
2. The loader creates all font formats and places them next to the origin
3. The loader fetches metadata from the font and creates @font-face code
4. The loader passes CSS with correct URLs to the next loader in row (probably css-loader)
## Roadmap
* Add extensive options, to make it work for various developers.
* Make sure you'll be able to toggle which formats you want.
* Accept other file formats as input (.otf, firstly converted to ttf)
* Look for ways to enable async loading of the font-face
* Add tests