Typography Stylist
| 开发者 | matthewneilcowan |
|---|---|
| 更新时间 | 2026年10月5日 21:25 |
| PHP版本: | 7.4 及以上 |
| WordPress版本: | 7.1 |
| 版权: | GPLv2 or later |
| 版权网址: | 版权信息 |
详情介绍:
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.
- 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.
- 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.
- 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.
- 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".
- 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.
- 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)
- 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
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
- 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.
安装:
- Upload the plugin files to
/wp-content/plugins/typography-stylist, or install the plugin from the Plugins screen. - Activate the plugin on the Plugins screen.
- Go to Settings → Typography Stylist to add your fonts and set the options.
- Open a post in the block editor. Select text in a heading, then click the Typography Stylist button 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:
- Upload a webfont kit from MyFonts, Font Squirrel, or another provider on the Custom Fonts tab.
- Connect Adobe Fonts (Typekit). Paste the embed code of your project.
- Define a custom font that your theme, another plugin, or a CDN (such as Google Fonts) loads. The font then shows in the editor's font list.
- Use a WordPress Font Library font (WordPress 6.5+) from the editor's font list.
How do I upload a font?
- Go to Settings → Typography Stylist → Custom Fonts.
- Click "Choose ZIP File" and select your webfont kit ZIP.
- Click "Upload Font Kit". The plugin reads the font names from the kit.
How do I add Adobe Fonts?
- Go to Settings → Typography Stylist → Custom Fonts.
- Find the "Adobe Fonts (Typekit)" section.
- Enter a project name.
- Paste your Adobe Fonts embed code (the
<script>tag). - Optional: enter the font family names for the preview list.
- Click "Add Adobe Fonts Project".
How do I use a font that my theme already loads?
- Go to Settings → Typography Stylist → Custom Fonts.
- Find the "Custom Font Definitions" section.
- Enter a display name for the font.
- Enter the exact CSS font-family value, for example
'Playfair Display', serif. - Optional: add fallback fonts, with commas between them.
- Click "Add Custom Font".
Can I set fallback fonts?
Yes. For each uploaded font, Adobe font, and custom font definition, you can set fallback fonts. The browser uses them if the main font does not load.
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?
- Set the typography of some text in either editor.
- Click "Save Current Settings as Style" and give the style a name.
- To use the style, select other text. 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.
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:
- Inline Format: Add aria-label Attributes: add an
aria-labelto text that you style in a heading or paragraph block. - Disable Word Boundary Warning: turn off the notice about styles on part of a word.
visually-hidden, sr-only, 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
- Storage in a directory with
.htaccessprotection
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, or 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.
更新日志:
2.3.1
- NEW: the Paragraph Styles tab shows a preview of each style. Each card shows sample text in the style's own font, weight, spacing and OpenType features, and says when a style's font was deleted and replaced.
- Improved: the settings page loads only the fonts it shows. Fonts load only for the open tab, and on the Custom Fonts tab only when a card comes into view. On a test site with 148 fonts, the Custom Fonts tab went from 133 font downloads to 12, and the page HTML from 5.97 MB to 1.84 MB.
- Improved: the block editor loads only the Adobe Fonts kits that the post uses. Another kit loads when you use or preview its font. On a test site with 77 kits, opening a post went from 154 kit requests to 9.
- Improved: a single post or page prints CSS only for the paragraph styles it uses. Archive pages, the blog page and search results still print every style, so posts that a "load more" button adds keep their styles. The block editor still gets every style.
- Fixed: translations did not load on WordPress 5.8 to 6.4. The French and Spanish files had a format error that earlier versions rejected.
- Fixed: French used the plural form for zero.
- Fixed: a fixed font size showed in the editor but not on the page. The Typography Stylist block now saves the size. For a block saved before this fix, edit any block in the post and save the post.
- Fixed: the weight checkboxes came back for variable fonts after you saved, added or deleted a font, and the settings page printed its data two times.
- Developers: the new
typost_force_enqueue_paragraph_style_idsfilter prints the CSS and loads the fonts of the styles you name on every page. See HOOKS.md. - Full details are in changelog.txt.
- NEW: Paragraph Styles are built in. Save the current typography as a named style and apply it anywhere. Styled text renders through a shared CSS class, so "Update Style" changes every use at once. Fit-to-width blocks save as styles too.
- NEW: a visual style browser. "Browse styles…" in the inline editor (and an optional block toolbar button) shows every style rendered in its own typeface, with your selected words as the sample. Search, group by font family, size mode or recently used, and move through the list with the keyboard.
- NEW: optional Glyphs and Paragraph Styles buttons in the block toolbar, and a choice of what Enter does in a Typography Stylist block. All three settings are in Options. The toolbar buttons are off by default, and Enter keeps its line-break behavior until you change it.
- Improved: the settings page updates in place. Uploading, adding, editing, deleting and registering fonts, and every settings form, no longer reload the page. Buttons keep keyboard focus while a request runs.
- Improved: the font menus are searchable. Type any part of a font name to narrow the list, in the sidebar, the Quick Feature Toggles and the inline editor.
- Improved: screen-reader and keyboard use of the editor panels. Dialog names are read first, every control is named, the panels have fewer Tab stops, focus stays inside an open panel, and contrast meets WCAG AA.
- Fixed: styled text kept the wrong weight or font. A feature toggle no longer makes a bold heading light; text styled only by the theme keeps its weight; a Font Library font that is installed but not activated now prints its @font-face; a font installed in the Library appears in the pickers on the next editor load.
- Fixed: conversion, nesting and sizing in the editors. "Convert to Typography Stylist Block" keeps the selection's styling on the selection only; the block reports when styling cannot nest deeper; the inline editor warns when responsive sizes are out of order; "Responsive (fluid)" applies at once in the Quick Feature Toggles.
- Fixed: the Glyphs Panel swapped or duplicated the wrong glyph, opened on the wrong font for theme-styled text, and refused
U+XXXXinput. - Fixed: paragraph styles dropped italic, went stale after in-session saves, lost to theme heading CSS, and did not load fonts for class-only content.
- Full details are in changelog.txt.
- NEW: Relative size and vertical shift for selected text in Fit-to-width blocks. Select part of a fitted line — a single glyph like the ampersand in "April & Andy" — and scale it down relative to the line's fitted size or nudge it up and down. Because the adjustments are relative, the line still fills the block width exactly at every screen size, and the frontend stays zero-JavaScript. The two new sliders appear in the Quick Feature Toggles when the block uses Fit to width sizing.
- Full details are in changelog.txt.
- NEW: Fit-to-width sizing. A third font-size mode on the Typography Stylist block: each line is sized so its text spans the full block width — the classic wedding-invitation/poster look where a short line renders huge and a long line smaller, all flush to the same width. Editing is fully WYSIWYG: every line renders at its true fitted size while you type and style selections. Lines are measured with their real fonts, features, and letter spacing; the frontend stays zero-JavaScript (CSS container queries), with an optional maximum-size cap and a responsive fallback for older browsers. Existing blocks are untouched.
- Fixed: variable-font axis sliders in the Quick Feature Toggles now change only the selected text instead of restyling the whole block (the sidebar sliders intentionally remain block-level), and an axis change no longer leaks into other Typography Stylist blocks on the page. The sliders also now read their starting values from your selection correctly in the iframed editor.
- Fixed: fonts registered in the WP Font Library keep their webfont on the frontend. Registered-but-unactivated fonts previously fell back to a local or system font on the frontend while the editor looked correct; the plugin now prints its own @font-face whenever WordPress won't.
- Full details are in changelog.txt.
- Fixed: fonts uploaded together in one ZIP no longer share each other's variable-font axes. Axis detection scanned the whole kit directory, so every family in a multi-font ZIP inherited the axes of whichever file parsed first — Fraunces lost its optical size, SOFT, and WONK sliders when uploaded alongside a weight-only font, and non-variable fonts in the same ZIP gained a phantom weight slider. Detection is now scoped to each family's own font files. Fonts uploaded on their own were never affected.
- Improved: "Detect Axes from Font File" repairs fonts in place. Use it on any font whose axes were mis-detected before this fix. It now falls back to reading the font on the server when the browser can't, so it works either way. It also states plainly that it replaces every axis row and discards hand-set values, and asks for confirmation before overwriting axes you have already defined — nothing is stored until you save.
- Changed: variable-font axis sliders now sit directly beneath the weight control in the inline editor and Quick Feature Toggles, matching the block sidebar.
- Full details are in changelog.txt.
- NEW: Font Style (visual italic) controls on all three editing surfaces — block-level, Quick Feature Toggles, and the inline editor. Deliberately style-only: it selects the font's italic face without adding emphasis semantics; the editor's own Italic button remains the way to emphasize text for screen readers.
- Italic-aware previews and Glyphs Panel — feature previews render with the italic face when the selection is italic, and the Glyphs Panel now loads and displays the face variant actually rendering at your selection (no toggle; the selection decides). Italic-only glyph sets like EB Garamond's swash italic capitals are finally browsable.
- Glyphs Panel opens to your selection — a selected letter pre-fills the alternates view; short combinations ("Th") show their exact ligature alternates.
- A large editor-robustness batch: Quick Feature Toggle changes always land on the selected text; mixed-selection edits change only the setting you touched; converting a styled heading to a Typography Stylist block preserves every span; glyph alternates survive font and feature changes; variable-font axis sliders no longer alter untouched axes (and the QFT weight slider works); font changes clear stale axis values; multi-span font changes actually take effect; quote-bearing attribute values survive span splits; the span-nesting limit is enforced everywhere.
- Full details for every fix are in changelog.txt.
- Automatic font-weight detection — newly added fonts (uploaded kits, Adobe Fonts, and Library fonts adopted in the editor) get their "Available Font Weights" pre-set to only the weights they actually ship, instead of all nine being enabled by default. A one-click "Auto-detect weights for existing fonts" button on the Custom Fonts tab covers fonts added before this release. Detection never narrows unless it is confident, and the checkboxes stay fully editable.
- Fixed: variable fonts uploaded as font-only ZIPs now glyph-browse correctly in the Glyphs Panel (the generated
format('truetype-variations')hint was not recognized by the panel's file picker).
- Packaging: re-release of the 2.1.0 feature set under a fresh version number. The 2.1.0 tag's downloadable ZIP was cached against stale contents and never delivered the new files (Variable Fonts core integration, font metadata/sources modules, WordPress Font Library integration); 2.1.1 ships them correctly. See the 2.1.0 entry below for the full list of changes included in this release.
- WordPress Font Library integration (WP 6.5+) — register uploaded fonts into the Font Library, per font or in bulk (opt-in and fully reversible), and use Library fonts straight from the editor font pickers. Existing content keeps rendering no matter what.
- Variable font support — automatic axis detection on upload, a "Detect Axes from Font File" button, per-font axis configuration, and axis sliders in both editors.
- Font-only ZIP uploads — kits containing just font files (e.g. a Google Fonts download) are now accepted; the @font-face stylesheet is generated automatically from the fonts' metadata.
- New
typost_force_enqueue_font_idsfilter — themes and extensions can force specific fonts to load on every page. - Plus many fixes and improvements across the Glyphs Panel, variable fonts, editor font loading, and admin accessibility (including a WCAG color-contrast audit of all admin color schemes) — the complete list is in changelog.txt.
- Fixed: Mixed-content blocking of locally-hosted fonts in the Glyphs Panel — same-host
http://font file URLs are now upgraded tohttps://before fetching, so fonts whose stored kit CSS contains absolute insecure URLs load correctly on HTTPS sites (cross-origin URLs are left untouched) Older releases are documented in changelog.txt (bundled with the plugin) and on the GitHub Releases page.