npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

fontfacegen

v0.5.1

Published

Browser font-face generator for creating browser usable fonts from ttf's or otf's

Downloads

522

Readme

fontfacegen

Build Status npm package Coverage Status

From a ttf or otf, generate the required ttf, eot, woff, svg and css for the font to be used in browsers.

Installing

npm install --save-dev fontfacegen

Requirements:

Installing fontforge

On MacOS:

brew install fontforge

On Ubuntu:

apt install fontforge

On other platforms, please refer to the fontforge documentation.

Usage:

var fontfacegen = require('fontfacegen');

var result = fontfacegen({
    source: '/path/to/source.{ttf,otf}',
    dest: '/destination/folder/',
});

Options:

source (required):

Path to the source font file in ttf or otf format.

dest (required):

Path to the destination folder for the converted fonts to be placed in.

css:

Path to the destination file to write the generated stylesheet to.

Default: null (Guess the css filename from the font filename)

css_fontpath:

Path to the font files relative to the css generated.

Default: ''

subset:

A string or array with the characters desired to be included inside the generated fonts

Default: null

collate:

Append the source filename to the destination directory in order to collate generated fonts into separate directories.

Default: false

IE:

options = {
    source: 'src/fonts/ariel.ttf',
    dest: 'dist/fonts/',
    collate: true
}

Will create fonts into 'dist/fonts/ariel/'.

embed:

Type: array Default: [] Valid values: ['woff', 'ttf']

Type of fonts to embed directly into the generated css file as a data-uri instead of creating files for them.

Font config files:

Font name, style and weight can be specified manually per font in a json file of the same name as the font.

For example, for the font: fonts/sans.ttf the config file would be: fonts/sans.json.

Example file format:

{
    "name"   : "Super Sans",
    "weight" : "400",
    "style"  : "normal"
}

Note: If present, the json config file must be valid json.

Complete example:

var fs          = require('fs');
var path        = require('path');
var fontfacegen = require('./fontfacegen');

var source = 'tmp/';
var dest   = 'tmp/dest/';
var fonts  = fs.readdirSync(source);

for (var i = fonts.length - 1; i >= 0; i--) {
    var font = fonts[i];
    var extension = path.extname(font);
    var fontname = path.basename(font, extension);

    // Test with embedded ttf
    if (extension == '.ttf' || extension == '.otf') {
        fontfacegen({
            source: path.join(source, font),
            dest: dest,
            css_fontpath: '../fonts/',
            embed: ['ttf'],
            subset: 'abcdef',
            collate: true
        });
    }
};

License

See the LICENSE file for license rights and limitations (MIT).