Skip to content
A full-featured Javascript library for creating interactive web font specimens
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.github
.gitignore
LICENSE
README.md
flont.css
flont.js

README.md

Flont

A Javascript library for creating interactive web font specimens.

Web designers can style up their own specimen layout, then plug in Flont to hook up form controls to modify various aspects of the specimen's typography. Flont's showcase feature is an inline OpenType alternates selection popup interface to allow casual users to create customized, swashy strings very easily.

Flont is still in development mode, so the code is not super organized or ready for inclusion in public projects.

Usage

Ultra-simple mode:

Flont('#specimen-element')

Call with a single element object or CSS selector string, representing the font-specimen display element. This will set that element up with popup glyph-alternates selection UI when the user selects text.

Flexible mode:

Flont({
  sample: '#specimen-element', //required
  controls: { //optional form controls you can hook up to change aspects of the specimen
      'font': '#font-select', //a select element, to change the displayed font
      'size': '#font-size-input', //input that controls font size
      'leading': '#line-height-input', //input that controls line height
      'tracking': '#letter-spacing-input', //input that controls letter spacing
      'foreground': '#fgcolor-input', //input that controls foreground color
      'background': '#bgcolor-input', //input that controls background color,
      'features': '#feature-select', //an empty select or list element to be filled with toggleable OpenType features
  },
  highlightColor: '#beefed', //optional CSS color to be used for highlights in the UI, e.g. "current glyph" callout
 })

About the project

Flont was written by Chris Lewis, based on work done originally for Laura Worthington Design. Many thanks to Laura for essentially financing the development of Flont, and for being game to release her signature website feature as a public tool!

You can’t perform that action at this time.