# css-font-face-src

> A CSS @font-face src property value parser

Latest version **2.1.0** (published 2025-10-06) · BSD-2-Clause license · 0 weekly downloads

## Install

```sh
npm install css-font-face-src
pnpm add css-font-face-src
yarn add css-font-face-src
bun add css-font-face-src
```

## Health

**Score 55/100 (C)** — status: stable.

Positive: has types; no vulnerabilities; high quality score.

Warnings: low downloads; no esm support.

## Facts

| | |
|---|---|
| Version | 2.1.0 |
| Published | 2025-10-06 |
| First published | 2014-04-04 |
| Weekly downloads | 0 |
| License | BSD-2-Clause |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 91.9 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 9 |
| Author | Christoph Burgmer |
| Maintainers | cburgmer |
| Keywords | css, parser, value, font, font-face |

## Links

- npm: https://www.npmjs.com/package/css-font-face-src
- Repository: https://github.com/cburgmer/css-font-face-src
- Homepage: https://github.com/cburgmer/css-font-face-src#readme
- Issues: https://github.com/cburgmer/css-font-face-src/issues
- npm.io page: https://npm.io/package/css-font-face-src

## Alternatives

- [babylon](https://npm.io/package/babylon.md) — 5.1M weekly downloads
- [csscolorparser](https://npm.io/package/csscolorparser.md) — 3.7M weekly downloads
- [expr-eval-fork](https://npm.io/package/expr-eval-fork.md) — 1.5M weekly downloads
- [@leeoniya/ufuzzy](https://npm.io/package/@leeoniya/ufuzzy.md) — 247.7K weekly downloads
- [xml-parser](https://npm.io/package/xml-parser.md) — 78.4K weekly downloads

## Recent versions

- 2.1.0 (latest) — 2025-10-06
- 2.0.0 — 2024-01-24
- 1.0.0 — 2016-11-05
- 0.2.2 — 2014-04-05
- 0.2.1 — 2014-04-05
- 0.2.0 — 2014-04-05
- 0.1.0 — 2014-04-04

## README

# CSS `@font-face` rule `src` field parser – `css-font-face-src`

<a href="https://www.npmjs.org/package/css-font-face-src">
    <img src="https://badge.fury.io/js/css-font-face-src.svg"
         align="right" alt="NPM version" height="18">
</a>

A CSS [@font-face](https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face) `src` property value parser.

Basically it provides two operations:

* `parse`: To convert a CSS property string to an array of easily readable objects. Each object either describes a **local font** (referenced using its family name) or a **remote font** (referenced using its URL).
* `serialize`: To convert an object array back to a CSS property string.

## Examples

### JavaScript verison (CJS, using `require`)

#### Parse

```js
const parser = require('css-font-face-src');

console.log(parser.parse('local("The Font"), url("font.otf") format("opentype"), url("font.woff"), local("Another Font")'));
```

will return:

```js
[
    { local: 'The Font' },
    { url: 'font.otf', format: 'opentype' },
    { url: 'font.woff' },
    { local: 'Another Font' }
]
```

#### Serialize

```js
const parser = require('css-font-face-src');

console.log(
    parser.serialize([
        { local: 'The Font' },
        { url: 'font.otf', format: 'opentype' },
        { url: 'font.woff' },
        { local: 'Another Font' }
    ])
);
```

will return:

```js
'local("The Font"), url("font.otf") format("opentype"), url("font.woff"), local("Another Font")'
```

### JavaScript version (ESM, using `import`)

#### Parse

```js
import { parse } from 'css-font-face-src';

console.log(parse('local("The Font"), url("font.otf") format("opentype"), url("font.woff"), local("Another Font")'));
```

will return:

```js
[
    { local: 'The Font' },
    { url: 'font.otf', format: 'opentype' },
    { url: 'font.woff' },
    { local: 'Another Font' }
]
```

#### Serialize

```js
import { serialize } from 'css-font-face-src';

console.log(
    serialize([
        { local: 'The Font' },
        { url: 'font.otf', format: 'opentype' },
        { url: 'font.woff' },
        { local: 'Another Font' }
    ])
);
```

will return:

```js
'local("The Font"), url("font.otf") format("opentype"), url("font.woff"), local("Another Font")'
```

### TypeScript version

#### Parse

```ts
import { parse } from 'css-font-face-src';

console.log(parse('local("The Font"), url("font.otf") format("opentype"), url("font.woff"), local("Another Font")'));
```

will return:

```ts
[
    { local: 'The Font' },
    { url: 'font.otf', format: 'opentype' },
    { url: 'font.woff' },
    { local: 'Another Font' }
]
```

#### Serialize

```ts
import { serialize, FontFaceSrcItem } from 'css-font-face-src';

console.log(
    serialize([
        { local: 'The Font' },
        { url: 'font.otf', format: 'opentype' },
        { url: 'font.woff' },
        { local: 'Another Font' }
    ] as FontFaceSrcItem[])
);
```

will return:

```ts
'local("The Font"), url("font.otf") format("opentype"), url("font.woff"), local("Another Font")'
```

## Author

Christoph Burgmer. Licensed under BSD-2-Clause. Reach out [on Twitter](https://twitter.com/cburgmer).

---
_Source: https://npm.io/package/css-font-face-src · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._