# ttf-module-loader

> Webpack Loader to use TTF files as CSS Modules

Latest version **1.0.0** (published 2018-06-18) · MIT license · 0 weekly downloads

## Install

```sh
npm install ttf-module-loader
pnpm add ttf-module-loader
yarn add ttf-module-loader
bun add ttf-module-loader
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.0 |
| Published | 2018-06-18 |
| First published | 2018-06-18 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Node | >=8 |
| Dependencies | 7 |
| Unpacked size | 8.8 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Székely Ádám |
| Maintainers | enteocode |
| Keywords | ttfautohint, webfont, webpack, css, ttf, loader, font-face |

## Links

- npm: https://www.npmjs.com/package/ttf-module-loader
- Repository: https://github.com/enteocode/ttf-module-loader
- Homepage: https://github.com/enteocode/ttf-module-loader#readme
- Issues: https://github.com/enteocode/ttf-module-loader/issues
- npm.io page: https://npm.io/package/ttf-module-loader

## Dependencies (7)

- [ttf2eot](https://npm.io/package/ttf2eot.md) ^2.0.0
- [ttf2svg](https://npm.io/package/ttf2svg.md) ^1.2.0
- [ttf2woff](https://npm.io/package/ttf2woff.md) ^2.0.1
- [ttf2woff2](https://npm.io/package/ttf2woff2.md) ^2.0.3
- [opentype.js](https://npm.io/package/opentype.js.md) ^0.8.0
- [ttfautohint](https://npm.io/package/ttfautohint.md) ^1.3.0
- [loader-utils](https://npm.io/package/loader-utils.md) ^1.1.0

## Alternatives

- [style-dictionary](https://npm.io/package/style-dictionary.md) — 2.0M weekly downloads
- [postcss-merge-idents](https://npm.io/package/postcss-merge-idents.md) — 1.7M weekly downloads
- [@fontsource/noto-sans](https://npm.io/package/@fontsource/noto-sans.md) — 93.0K weekly downloads
- [uglifycss](https://npm.io/package/uglifycss.md) — 71.6K weekly downloads
- [mat4-interpolate](https://npm.io/package/mat4-interpolate.md) — 23.3K weekly downloads

## Recent versions

- 1.0.0 (latest) — 2018-06-18

## README

ttf-module-loader  [![Build Status][X]][Y]
=================

> Webpack Loader to use TTF files as CSS Modules

### Key Features

- Parses TTF for OS/2 and NAME tables to create `@font-face` declaration
  automatically
- Adds hinting info ([TTFAutohint][0])
- Generates CSS and standard WebFont files
  - `WOFF`
  - `WOFF2`
  - `TTF`
  - `EOT` \*
  - `SVG Font` \*

The types marked with \* are supported only if `legacy` option is enabled. 

### Highlights

- Type strict as possible (ESLint)
- ES7
- Functional

### Requirements

- `webpack` (2.0 and above)
- `css-loader`

## Install

```bash
$ npm i ttf-module-loader
```

## Configuration

`webpack.config.js`

```javascript 
{
    test : /\.(?:css|ttf)$/i,
    use : [
        'style-loader',
        'css-loader?modules&importLoaders=1',
        'ttf-module-loader'
    ]
}
```

### Options

#### `output: string = "font/[hash:4]"`

The output pattern of the generated assets. Avoid using extension in the pattern, 
as it will be suffixed differently for different formats.

- `[hash]`: Digest of the resource
- `[name]`: Basename of the resource

#### `legacy: boolean = false`

If enabled, implements support for old browsers (IE 6+, legacy iOS).

## Usage

When a TTF file is imported at first time, a `@font-face` declaration is 
created, so it become ready to use.

### CSS Modules

Every generated CSS exports a class definition with the name `font` to
compose.

```css
.myClass {
    composes: font from 'path/to/font.ttf';
}
```

If you have your own strategy:

```css
@value NAME, WEIGHT from 'path/to/font.ttf';
 
.myClass {
    font: WEIGHT 100%/1.5 NAME, sans-serif;
}
```

### ECMAScript

```javascript
import * as font from 'path/to/font.ttf';
 
console.log(font);
```

## Technical Overview

**The imported filename doesn't make any sense over caching.**
 
Every data needed to build `@font-face` declaration is extracted directly from
the Font to avoid multiple cache instances caused by different query 
parameters. As an additional benefit of parsing, we can create the best
configuration for hinting without any manual intervention.

#### Autodetect configuration

- For icon-fonts
- For sub and superscript support

#### Font-faces

If you are importing multiple faces of the same family, it will act like this:

`Roboto.ttf`

```css
@font-face {
    font-family: Roboto;
    font-weight: 400;
    font-style: normal;
}
```

`RobotoBoldItalic.ttf`

```css
@font-face {
    font-family: Roboto;
    font-weight: 700;
    font-style: italic;
}
```

#### Exported properties

Every generated CSS exports additional constants about the Font:

- **`NAME`** - Family name (like `Roboto`)
- **`PATH`** - The URL of the generated TTF output (like `/font/793ec93a.ttf`)
- **`WEIGHT`** - The weight (`100`...`900`)
- **`STYLE`** - Style (one of `normal`, `italic`, `oblique`)

## License

MIT © 2018, [Székely Ádám][Z]

[0]: https://www.freetype.org/ttfautohint/
[X]: https://api.travis-ci.com/enteocode/ttf-module-loader.svg?branch=master
[Y]: https://travis-ci.org/enteocode/ttf-module-loader
[Z]: https://github.com/enteocode

---
_Source: https://npm.io/package/ttf-module-loader · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._