Skip to content
master
Switch branches/tags
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
 
 
 
 
 
 
 
 

Flont

A Javascript library for creating interactive web font specimens. Demo: https://flont.chrislewis.codes/

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

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. Thanks to Laura Worthington Design for partially financing the development of Flont.

About

A full-featured Javascript library for creating interactive web font specimens

Resources

License

Releases

No releases published

Sponsor this project

Packages

No packages published