Some of your fonts’ best work is hidden.

Professional fonts often contain swashes, stylistic sets, ligatures, and alternate characters. Unfortunately, using these features often resorts to manually inserting characters with inline spans, which is tedious, error-prone, and can cause issues with accessibility. Typography Stylist opens the full font cabinet, adding controls for these advanced features to the block editor with accessibility in mind, making it easy to use all the typographic features your fonts offer.

If you set type in professional design tools, you know what these fonts can do. Typography Stylist brings that control to WordPress. You decide how your type looks, down to a single character. Pick the alternate you want for one letter, set a variable font to weight 435, and save the result as a paragraph style for the rest of the site, which you can later update everywhere at once. Typography Stylist also manages your fonts: upload webfont kits, connect Adobe Fonts, or use fonts from the WordPress Font Library.

Glyphs Panel

The Glyphs Panel shows every character in a font, like the Glyphs panel in Adobe Illustrator.

Search by character, by codepoint (U+XXXX), or by glyph name.
Filter by stylistic set, by OpenType feature, or by Unicode block.
Select a letter in your text to see all of its alternates. Click an alternate to put it in place of the letter.
Click any glyph to insert it into your text.
Move through the grid with the keyboard. Screen readers announce each glyph.

The panel reads the font in your browser, and it reads only the font’s metadata. It does not extract glyph outlines, and it does not store font data on your server.

Paragraph Styles

A paragraph style is a named set of typography settings, like a paragraph style in Adobe InDesign. Save a style one time, then apply it to text in any heading, paragraph, or Typography Stylist block.

A style holds the font, weight, italic, size, letter spacing, line height, OpenType features, and variable font axes. Fit-to-width sizes can also go into a style.
“Browse styles…” shows each style in its own typeface, with your selected words as the sample text. You can search the list, and group it by font family, by size type, or by recent use.
Each style is one CSS class. Change a style and click “Update Style”, and all text that uses the style changes.
If the selected text already has its own settings, the editor asks before the style replaces them.
“Detach Style” changes styled text back to independent settings.
Rename and delete styles on the Paragraph Styles tab in Settings Typography Stylist.

Granular typography control

Set the typography of a whole block, or of one word or one letter in it.

OpenType features: ligatures, swashes, stylistic sets ss01 to ss20, small capitals, figure styles, and more. The full list is below.
Variable fonts: the plugin reads the axes from the font file, and each axis gets a slider. You can set a weight of 435, not only 400 or 700. Custom axes also get sliders.
Size: a fixed size, a responsive size (a CSS clamp() between a minimum and a maximum), or fit-to-width.
Fit-to-width: each line of a Typography Stylist block fills the width of the block, as on a poster or a wedding invitation. In a fitted line, you can make one glyph smaller or move it up or down, and the line still fills the width.
Spacing and style: letter spacing, line height, weight, and italic.

Your site’s front end gets CSS only. The plugin adds no JavaScript to your pages.

Two ways to style text

In a heading or paragraph block. Select the text, then click the Typography Stylist button (a swash “T”) in the block toolbar. Use this for whole words and phrases.
In a Typography Stylist block. Use this block for letter-by-letter work. Set the options for the whole block in the sidebar. Select text in the block to change only that text.

Two settings in Settings Typography Stylist Options add a Glyphs button and a Paragraph Styles button to the block toolbar. Both settings are off by default.

Accessibility

A style on part of a word puts the letters in separate elements. Some screen readers then read the word in pieces, or skip it. The Typography Stylist block prevents this. It writes two copies of your text:

A plain heading for screen readers. It is hidden from view, and it keeps the document outline correct.
A styled copy for the screen, with aria-hidden="true".

If you style part of a word in a heading or paragraph block, a notice tells you about the risk. The notice offers a one-click conversion to a Typography Stylist block. Your change applies whether you convert or not. You can turn the notice off in Settings Typography Stylist Accessibility.

The editor panels work with the keyboard and with screen readers.

Fonts

Use fonts from these sources:

Webfont kits from MyFonts, Font Squirrel, and other providers. A ZIP with only font files also works. The plugin makes the @font-face CSS for you.
Adobe Fonts projects.
Fonts that your theme, another plugin, or a CDN already loads.
Fonts in the WordPress Font Library (WordPress 6.5+). You can also add your uploaded fonts to the Font Library, and remove them again.

By default, a font loads only on the pages that use it. This includes blog, category, and tag archives. When you delete a font, you can choose a replacement font, and content that used the deleted font shows the replacement.

Supported OpenType Features

Ligatures:
* Standard Ligatures (liga)
* Discretionary Ligatures (dlig)
* Contextual Alternates (calt)
* Contextual Ligatures (clig)
* Historical Ligatures (hlig)

Stylistic Sets:
* ss01 through ss20

Swashes & Alternates:
* Swashes (swsh)
* Contextual Swashes (cswh)
* Stylistic Alternates (salt)
* Titling (titl)
* Historical Forms (hist)

Decorative:
* Ornaments (ornm)

Numerals & Figures:
* Proportional Figures (pnum)
* Tabular Figures (tnum)
* Lining Figures (lnum)
* Oldstyle Figures (onum)
* Fractions (frac)
* Slashed Zero (zero)

Capitals & Case:
* Small Capitals (smcp)
* Capitals to Small Caps (c2sc)
* Petite Capitals (pcap)
* Case-Sensitive Forms (case)

Positional Forms:
* Initial Forms (init)
* Medial Forms (medi)
* Terminal Forms (fina)
* Isolated Forms (isol)

Superscript & Ordinals:
* Superscript (sups)
* Subscript (subs)
* Ordinals (ordn)

Other Features:
* Kerning (kern)
* Localized Forms (locl)
* Randomize (rand)

Recommended Fonts

The OpenType features work only with fonts that contain them. Many script fonts and professional typefaces do. Some examples:

Script fonts by Alejandro Paul, such as Inglesa, and Gratitude Script (with the wonderful Kathy Milici)
Bookmania by Mark Simonson
Orpheus, designed by Kevin King, Patrick Griffin, and Walter Tiemann, from Canada Type
Elaina and other fonts by Laura Worthington
Liza from Underware
Memoriam by Patrick Griffin
ITC Avant Garde, designed by André Gürtler, Christian Mengelt, Ed Benguiat, Erich Gschwind, Herb Lubalin, and others, from Monotype

To see which features a font has, read its specimen or open it in the Glyphs Panel.

Bundled Third-Party Libraries

The Glyphs Panel reads font files in the browser with two open-source libraries. They are bundled unmodified in glyphs-panel/assets/js/vendor/. They load only when you open the Glyphs Panel, and they run in the browser. No font data goes to a server.

opentype.js v1.3.4: reads TTF, OTF, and WOFF font files. MIT License. Source: https://github.com/opentypejs/opentype.js
wawoff2: decompresses WOFF2 font files (a WebAssembly build of Google’s woff2). MIT License. Source: https://github.com/fontello/wawoff2

See BUILD.txt for build and source details.

Source, Docs & Support

Source code and issue tracker: github.com/mattcowan/typography-stylist-for-wordpress
Developer documentation: the hooks reference (HOOKS.md) is on GitHub.
Beta builds: pre-release versions go to the GitHub Releases page before they go to WordPress.org.
Support: the WordPress.org support forum, or GitHub issues for bugs.

If you like the plugin, a short review helps other type lovers find it.

Technical Details

Data Storage

Typography features are stored as inline styles and data attributes within post content. No additional database tables are created.

Extensibility

Developers can extend the plugin using WordPress hooks and filters — see HOOKS.md on GitHub for the full reference with examples. REST API endpoints are available at /wp-json/typost/v1/.

Source Code

This plugin includes both compiled/minified files and their source code to meet WordPress security and transparency requirements.

Minified/Compiled Files:
* assets/js/.min.js files have corresponding source files in assets/js/
* assets/css/.min.css files have corresponding source files in assets/css/
* blocks/typography-stylist/build/ files are compiled from blocks/typography-stylist/ source files

Credits

Developed by Matthew Cowan.

Special thanks to my wife for her support and inspiration, and to my dog, Sugar, for taking long walks with me between adding features.