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

A 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

1const parser = require('css-font-face-src');
2
3console.log(parser.parse('local("The Font"), url("font.otf") format("opentype"), url("font.woff"), local("Another Font")'));

will return:

1[
2    { local: 'The Font' },
3    { url: 'font.otf', format: 'opentype' },
4    { url: 'font.woff' },
5    { local: 'Another Font' }
6]

Serialize

1const parser = require('css-font-face-src');
2
3console.log(
4    parser.serialize([
5        { local: 'The Font' },
6        { url: 'font.otf', format: 'opentype' },
7        { url: 'font.woff' },
8        { local: 'Another Font' }
9    ])
10);

will return:

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

JavaScript version (ESM, using import)

Parse

1import { parse } from 'css-font-face-src';
2
3console.log(parse('local("The Font"), url("font.otf") format("opentype"), url("font.woff"), local("Another Font")'));

will return:

1[
2    { local: 'The Font' },
3    { url: 'font.otf', format: 'opentype' },
4    { url: 'font.woff' },
5    { local: 'Another Font' }
6]

Serialize

1import { serialize } from 'css-font-face-src';
2
3console.log(
4    serialize([
5        { local: 'The Font' },
6        { url: 'font.otf', format: 'opentype' },
7        { url: 'font.woff' },
8        { local: 'Another Font' }
9    ])
10);

will return:

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

TypeScript version

Parse

1import { parse } from 'css-font-face-src';
2
3console.log(parse('local("The Font"), url("font.otf") format("opentype"), url("font.woff"), local("Another Font")'));

will return:

1[
2    { local: 'The Font' },
3    { url: 'font.otf', format: 'opentype' },
4    { url: 'font.woff' },
5    { local: 'Another Font' }
6]

Serialize

1import { serialize, FontFaceSrcItem } from 'css-font-face-src';
2
3console.log(
4    serialize([
5        { local: 'The Font' },
6        { url: 'font.otf', format: 'opentype' },
7        { url: 'font.woff' },
8        { local: 'Another Font' }
9    ] as FontFaceSrcItem[])
10);

will return:

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

Build status

Author

Christoph Burgmer. Licensed under BSD-2-Clause. Reach out on Twitter.