Typography Stylist - Complete Description
Category: WordPress Plugins • Platform: PHP
Typography Stylist provides advanced typography controls for WordPress. This plugin allows you to apply OpenType features directly in the block editor, and set properties like letter spacing, font-weight, and more. With support for ligatures, stylistic sets, swashes, and alternates, you can create elegant headlines and premium typography effects with ease. Accessibility features ensure that your styled text remains readable by screen readers.
Key Features
- Custom Typography Stylist Block: Create complex typography with maximum accessibility using the dedicated block. Screen-readers can “stumble” over complex inline formatting required to display specific ligatures and alternates. This block preserves the document outline while providing styled text for visual users.
- Inline Text Selection: Highlight any text within richtext blocks, and apply basic typography features quickly. A warning will pop-up if your selection may cause accessibility issues, and you can quickly convert to the Custom Typography Stylist Block for maximum accessibility.
- Live Preview: Preview changes in real-time before applying.
- Rich Feature Support: Ligatures (liga, dlig, calt), Stylistic Sets (ss01-ss20), Swashes, Alternates, and more.
- Visual Interface: User-friendly popover with organized feature categories.
- Advanced Typography Controls: Adjust letter spacing, font weight, responsive font sizes, and more.
- Block Editor Native: Seamlessly integrates with Gutenberg.
- Custom Fonts Management: Upload webfont kits from MyFonts, Fontspring, or other providers, connect Adobe Fonts, or define custom fonts loaded through themes or CDNs. Fonts are loaded intelligently only on the pages you need them for optimum performance.
- Font Fallbacks: Facing a rebranding and needing to change fonts? No worries. Delete a font previously defined, and use the fallback system to seamlessly replace them.
- Font Preview: Test OpenType features with any uploaded font in the settings > admin page to find exactly the styles you need.
- Accessibility Features: Screen reader support with ARIA markup and a heading structure that maintains proper semantics for both screen reader and visual views
- Smart Warnings: Alerts when selecting partial words and offers accessible conversion
- ARIA Label Support: Optional aria-label attributes for screen reader compatibility
Supported OpenType Features
Ligatures:
* Standard Ligatures (liga)
* Discretionary Ligatures (dlig)
* Contextual Alternates (calt)
Stylistic Sets:
* ss01 through ss20
Swashes & Alternates:
* Swashes (swsh)
* Contextual Swashes (cswh)
* Stylistic Alternates (salt)
* Titling (titl)
* Ornaments (ornm)
Perfect For
- Wedding invitations and event designs
- Luxury brand websites
- Editorial and magazine layouts
- Elegant script fonts
- Display typography
- Premium web fonts
Recommended Fonts
This plugin requires fonts that support OpenType features. Many premium script fonts and professional typefaces include these features.
Examples:
* Script fonts by Alejandro Paul (Calgary Script, Affair, Adios Script, Parfumerie Script)
* Bookmania by Mark Simonson
* Alana and other fonts by Laura Worthington
* Professional typefaces with OpenType support
Check the font’s documentation or specimen to verify which OpenType features are supported. Not all fonts have alternates or other advanced features.
How It Works For Headlines
- Create or edit a heading block (H1-H6)
- Type your headline text
- Select the text you want to style
- Click the “Typography Features” button in the toolbar (a swashy “T” icon)
- Select individual features
- See the live preview at the bottom of the popover
- If using partial word selections, heed any accessibility warnings to convert to the Typography Stylist Block for maximum accessibility
- Click Apply
How It Works For Custom Blocks
- Create or edit a Typography Stylist block
- Type your text
- Apply any global block settings in the sidebar
- Select any text you want to style
- Click the “Typography Features” button in the toolbar (a swashy “T” icon)
- Select individual features and see the live preview
Technical Details
Browser Support
- Chrome/Edge: Full support
- Firefox: Full support
- Safari: Full support
- Internet Explorer 10+: Partial support
Performance
Features are applied using CSS font-feature-settings, which is hardware-accelerated in modern browsers. The plugin includes JavaScript in the block editor but uses only CSS for frontend rendering.
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. REST API endpoints are available at /wp-json/typography-stylist/v1/.
Font Management
The plugin provides three ways to add custom fonts:
Upload Webfont Kits:
Upload complete webfont kits (ZIP files) from MyFonts, Fontspring, or other providers. The plugin extracts fonts, processes CSS, and stores files securely in your WordPress uploads directory.
Adobe Fonts Integration:
Connect Adobe Fonts (Typekit) projects by pasting the embed code. Fonts load directly from Adobe’s servers.
Custom Font Definitions:
Define fonts that are already loaded through your theme, plugins, or CDN (like Google Fonts). Simply provide the font family name and optional fallbacks. No files are uploaded to WordPress—fonts continue loading from their original source.
All three methods make fonts available in the block editor and preview selector.
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.
