Fontsampler.js

A configurable standalone webfont type tester for displaying and manipulating sample text in the browser.

Fontsampler library ~13kb minified & gzipped Fontsampler skin js & css ~15kb minified & gzipped

Support for:

• woff / woff2 / woff2 variable fonts
• available and configurable UI for:
  • tester input
  • font picker
  • font size
  • line height
  • letter spacing
  • alignment
  • direction (ltr/rtl)
  • language (html lang attr, triggering OT locl features)
  • variable axes (configurable, not detected)
  • opentype (configurable, not detected)
• API for manipulating the instances
• optional skin to enhance bare browser input UI
• configurable UI, options, font settings
• initialization on empty DOM node
• initialization on existing DOM structure (to use custom layout and UI)

Installation

Via npm:

$ npm install fontsampler-js

Use

See underscoretype.github.io/fontsampler-js/ for detailed examples.

A minimal example:

<script src="assets/fontsampler.js"></script>
<script src="assets/fontsampler-skin.js"></script>
<link rel="stylesheet" href="assets/fontsampler-skin.css">
…
<div id="demo"></div>
…
<script>
var fonts = [
    "name": "My Font",
    "files": ["path/to/file.woff", "path/to/file.woff2"]
]
var options = {
    order: [["fontsize", "lineheight", "letterspacing"], "tester"]
}
var demo = new Fontsampler(document.getElementById("demo"), fonts, options)
FontsamplerSkin(demo)
demo.init()
</script>

Status

Currently work in progress and pre-release. API not stable and likely to change.

Development

PRs, issue reports and feature requests welcome.

Development requirements:

$ npm install

If you use VSCode src compiling tasks should automatically be started, else see the package.json scripts.

For testing:

$ npm install -g protractor jasmine
$ webdriver-manager start
$ npm run test

Changelog

See CHANGELOG.md

TODO / Roadmap

• Implement public event interface (change, click, init, loading, loaded) mostly done
• Implement API on main object (set/get, set/get option, destroy, reset) mostly done
• Implement per-font options (e.g. one font ltr other rtl etc) partially done
• Add Unit and End-to-End tests started

License

Licensed under MIT License

Licenses for fonts included in the demo

• Alegreya by Huerta Tipografica (License)
• IBM Plex Sans by Bold Monday and Mike Abbink / IBM (License)
• Work Sans by Wei Huang (License)
• Amstelvar by TypeNetwork/David Berlow (License)