Typography Stylist

Some of your fonts’ best work is hidden.

Professional fonts often contain swashes, stylistic sets, ligatures, and alternate characters. Without a tool, you must type these characters by hand inside inline spans. This is slow, mistakes are easy, and the result can be difficult for screen readers. Typography Stylist adds controls for these features to the block editor, and it keeps the text accessible.

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. Save the result as a paragraph style for the rest of the site, and later update the style everywhere at one time. 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 OpenType feature (this includes the stylistic sets) 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, case (All Caps, Small Caps and others), size, letter spacing, line height, OpenType features, variable font axes, and the First Letter Hang. 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 mode, or by recent use.
• Each style is one CSS class. Change a style and click “Update Style”. All text that uses the style then changes.
• A style can be based on another style, like “Based On” in InDesign. It uses that style’s value for every setting it does not set itself, so one change to a “Body” style also changes “Caption” and the other styles based on it.
• 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.
• In a core Paragraph or Heading block, a style can apply to the whole block. Use the Paragraph Style panel in the block sidebar, or the toolbar button with no text selected. The block’s own sidebar settings override the style, and the theme’s block styles (such as “Outline”) keep working.
• Edit, rename and delete styles on the Paragraph Styles tab in Settings → Typography Stylist. Edit changes every setting of a style: font, weight, font style, size, spacing, line height, First Letter Hang, case, OpenType features and variable font axes, and the style it is based on. Every post that uses the style shows the change.

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–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: The text can keep the size it inherits, use a responsive size (a CSS clamp() between a minimum and a maximum), or use 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: You can set the 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

1. In a heading, paragraph, or other text block. Select the text, then click “Typography Stylist Features” (a swash “T”) in the block toolbar. Use this for whole words and phrases. Changes apply at once.
2. 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 has a button that converts the block 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 the font 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: Use 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

The plugin keeps the typography of your text in the post content, as inline styles and data attributes. It keeps fonts, paragraph styles, and settings in the WordPress options table. The plugin adds no database tables. Uploaded font files go in wp-content/uploads/typography-stylist/fonts/.

Extensibility

Developers can extend the plugin with WordPress hooks and filters. HOOKS.md on GitHub has the full reference, with examples. The REST API endpoints are at /wp-json/typost/v1/.

Source Code

The plugin contains its compiled and minified files, and also their source code. WordPress.org requires this for security and transparency.

Minified and compiled files:

• Each assets/js/*.min.js file has its source file in assets/js/.
• Each assets/css/*.min.css file has its source file in assets/css/.
• The files in blocks/typography-stylist/build/ are compiled from the source files in blocks/typography-stylist/.

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.

1. Upload the plugin files to /wp-content/plugins/typography-stylist, or install the plugin from the Plugins screen.
2. Activate the plugin on the Plugins screen.
3. Go to Settings → Typography Stylist to add your fonts and set the options.
4. Open a post in the block editor.
5. Select text in a heading, then click “Typography Stylist Features” in the block toolbar.

Do I need special fonts?

For OpenType features such as stylistic sets and swashes, the font must contain them. Many professional typefaces do. Many free fonts have few features or none. Letter spacing, line height, size, and weight work with any font. If a font does not have a feature, the feature has no effect.

Does this work with Google Fonts?

Yes. Some Google Fonts have OpenType features. Read the font’s specimen page to see which ones.

Can I use my own web fonts?

Yes. You can add fonts in four ways:

1. Upload a webfont kit from MyFonts, Font Squirrel, or a different provider on the Custom Fonts tab.
2. Connect Adobe Fonts (Typekit). Paste the embed code of your project.
3. Define a custom font that your theme, a different plugin, or a CDN (such as Google Fonts) loads. The font then shows in the editor’s font list.
4. Use a WordPress Font Library font (WordPress 6.5+) from the editor’s font list.

The plugin can also apply OpenType features to a font that your site already loads, without a selection in the font list. The previews on the settings page work only for fonts that you upload or connect through the plugin.

How do I upload a font?

1. Go to Settings → Typography Stylist → Custom Fonts.
2. Open “Add Font”, then open “Upload Font Kit”.
3. Click “Choose ZIP File” and select your webfont kit ZIP.
4. Click “Upload Font Kit”. The plugin reads the font names from the kit.

Kits from MyFonts and Font Squirrel, and font downloads from Google Fonts, all work. The ZIP does not need a stylesheet. If the ZIP has only font files, the plugin reads the metadata of each font and makes the @font-face CSS. For a variable font, the CSS includes the weight range. The server cannot read WOFF2 metadata. For a ZIP with only WOFF2 files, the plugin gets the family and the weight from the file names, and a warning asks you to check them.

The plugin also finds the weights that each font has, and checks only those weights in “Available Font Weights”. You can change the checkboxes at any time.

How do I add Adobe Fonts?

1. Go to Settings → Typography Stylist → Custom Fonts.
2. Open “Add Font”, then open “Add Adobe Fonts Project”.
3. Paste the embed code of your Adobe Fonts project (the <link> tag) into “Adobe Fonts Embed Code”. The older <script> embed code also works.
4. In “Font Family Names”, enter the font family names from your project, with commas between them. This field is necessary.
5. Click “Add Adobe Fonts Project”.

Make sure that your domain is authorized in your Adobe Fonts project settings. The fonts load from Adobe’s servers.

How do I use a font that my theme already loads?

1. Go to Settings → Typography Stylist → Custom Fonts.
2. Open “Add Font”, then open “Add Custom Font Definition”.
3. In “Font Name”, enter a display name for the font.
4. In “CSS Font Family”, enter the exact CSS font-family value, for example 'Playfair Display', serif. You can include fallback fonts in this value.
5. Click “Add Custom Font”.

The font shows in the block editor’s font list. The plugin does not load the font. The settings page cannot preview features for it.

Can I set fallback fonts?

Yes. Click the name of a font on the Custom Fonts tab to open its settings. Enter the fallback fonts in “Fallback Fonts (optional)”, with commas between them. The browser uses them if the main font does not load. Content refers to a font through a CSS variable, so the change applies to existing content too.

What happens to my content if I delete a font?

When you delete a font, you can choose a replacement font. Content that used the deleted font then shows the replacement. You can manage these replacements on the Replacement Fonts tab. Use this when you change fonts for a rebrand.

How do paragraph styles work?

1. Set the typography of some text in either editor.
2. Click “Save Current Settings as Style” and give the style a name.
3. Select other text.
4. To apply the style in a heading or paragraph, click “Browse styles…” and pick the style. In a Typography Stylist block, pick the style from the Paragraph Style list.

To style a whole Paragraph or Heading block, open Paragraph Style in the block sidebar and click “Browse styles…”. The style goes into the block’s “Additional CSS class(es)” field as typost-styled typost-ps-N. Do not remove those two classes by hand; use “Detach Style” instead.

To change a style everywhere, change the settings on text that uses the style and click “Update Style”. The style browser shows 24 styles at a time. A button under the list shows the next styles.

To base a style on another style, click “Edit” on the style in Settings → Typography Stylist → Paragraph Styles and choose a style in “Based on”. The style then uses that style’s value for every setting it does not set itself, and follows later changes to it. The card marks each value as “Inherited” or “Override”, and “Reset to Base” in the Edit form removes all overrides. When you delete a style, the styles based on it keep their look.

Is this plugin accessible?

Yes. See the Accessibility section in the description for the two-copy pattern and the word-boundary notice. Settings → Typography Stylist → Accessibility has these options:

• Disable Word Boundary Warning: Turns off the notice about styles on part of a word.

Each Typography Stylist block also has an Accessibility panel in its sidebar. There, choose the class that hides the plain heading: visually-hidden, sr-only, screen-reader-text, or your own class.

Does the hidden heading cause a duplicate content problem for SEO?

No. Google’s spam policies name “text that’s only accessible to screen readers and is intended to improve the experience for those using screen readers” as hidden text that does not break their rules. The hidden heading and the styled copy contain the same text.

Should I style text in a heading block or use the Typography Stylist block?

• Use a heading or paragraph block to style whole words or phrases.
• Use a Typography Stylist block for letter-by-letter work, fit-to-width lines, or the most control over accessibility.

What file types can I upload?

A ZIP file that contains:

• Font files: WOFF, WOFF2, TTF, OTF, or EOT.
• Optional: a CSS file with @font-face rules. The plugin uses it as it is.

Is font upload secure?

The upload has these protections:

• File type validation
• Safe ZIP extraction, with protection against path traversal
• CSS sanitization
• A 10 MB size limit for the ZIP, and 1 MB for a CSS file
• Storage in a directory with .htaccess protection

Does this work with page builders?

The plugin is for the WordPress block editor. It works in a page builder only if the page builder uses block editor rich text.

Will this slow down my site?

The front end gets CSS only, with no JavaScript. A font loads only on the pages that use it. Font file size is the main cost, as with any web font. The JavaScript loads only in the block editor.

How do I know which features my font supports?

Open the font in the Glyphs Panel. It lists the OpenType features that the font contains, and shows every glyph for each feature. You can also read the font’s documentation.

Do variable fonts work?

Yes. When you upload a variable font, the plugin reads its axes from the font file: weight, width, slant, optical size, and any custom axis. Each axis gets a slider in both editors, and the output is standard font-variation-settings CSS. The server reads TTF and OTF files. For a kit with only WOFF2 files, click “Detect Axes from Font File” in the font’s settings to read the axes in your browser. You can also enter the axes by hand.

What does “register in the WordPress Font Library” do?

On WordPress 6.5+, the plugin adds new uploaded fonts to the WordPress Font Library automatically. You can turn this off in Options. To add older fonts, use the Custom Fonts tab, one font at a time or all together. WordPress can then use them like any Library font. In WordPress 7.1, the Font Library is at Appearance → Fonts. In earlier versions, open it from the Site Editor, in Styles → Typography. The font files stay where they are, and your existing content does not change. You can remove a font from the Library again. Adobe Fonts and custom font definitions stay in the plugin, because Adobe fonts load from Adobe’s servers.

Where can I get beta versions or report bugs?

Beta builds are pre-releases on the GitHub Releases page. Download the attached ZIP and install it from Plugins → Add New → Upload. Report bugs on the GitHub issue tracker or on the WordPress.org support forum.