Linux 软件免费装

在这里免费安装WordPress以及其他软件

Banner图

Typography Stylist

开发者 matthewneilcowan
更新时间 2026年1月27日 04:08
PHP版本: 7.4 及以上
WordPress版本: 6.9
版权: GPLv2 or later
版权网址: 版权信息

标签

webfonts typography opentype ligatures stylistic-sets

下载

1.1.3 1.1.4

详情介绍:

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 Supported OpenType Features Ligatures: Perfect For Recommended Fonts This plugin requires fonts that support OpenType features. Many premium script fonts and professional typefaces include these features. Examples: How It Works For Headlines
  1. Create or edit a heading block (H1-H6)
  2. Type your headline text
  3. Select the text you want to style
  4. Click the "Typography Features" button in the toolbar (a swashy "T" icon)
  5. Select individual features
  6. See the live preview at the bottom of the popover
  7. If using partial word selections, heed any accessibility warnings to convert to the Typography Stylist Block for maximum accessibility
  8. Click Apply
How It Works For Custom Blocks
  1. Create or edit a Typography Stylist block
  2. Type your text
  3. Apply any global block settings in the sidebar
  4. Select any text you want to style
  5. Click the "Typography Features" button in the toolbar (a swashy "T" icon)
  6. Select individual features and see the live preview

安装:

  1. Upload the plugin files to /wp-content/plugins/opentype-stylist, or install through the WordPress plugins screen
  2. Activate the plugin through the 'Plugins' screen in WordPress
  3. Go to Settings → Headline Typography to view available features and presets
  4. Start using the typography features in the block editor!

屏幕截图:

  • Font Feature Preview (Admin Settings Page)
  • Typography Stylist panel, available on headings and other rich text blocks by clicking the swashy "T" icon in the toolbar
  • Typography Stylist Block with global controls in the sidebar
  • Typography Stylist Block with Quick Feature Toggle open to apply stylistic sets and other features

升级注意事项:

1.1.4 Fixes mixed content warnings on HTTPS sites. Custom fonts now load securely using protocol-agnostic URLs. 1.1.3 Initial release of Typography Stylist with accessibility features, font management, and OpenType typography controls.

常见问题:

Do I need special fonts?

Yes, this plugin requires fonts that support OpenType features. Most premium script fonts and many professional typefaces include these features. Free fonts may have limited support.

Will this work with any font?

The plugin will work with any font, but you'll only see results if the font includes the OpenType features you're trying to use. Check your font's documentation for supported features.

Does this work with Google Fonts?

Some Google Fonts support OpenType features. Check the individual font's specimen page for feature support.

Can I use this with custom web fonts?

Absolutely! You have four options:

  1. Upload webfont kits from MyFonts, Fontspring, or other providers using the plugin's Custom Fonts tab
  2. Connect Adobe Fonts (Typekit) by pasting your project's embed code
  3. Define custom fonts loaded through your theme, plugins, or CDN (like Google Fonts)
  4. Load fonts manually using @font-face in your theme
The plugin can apply OpenType features to any font loaded on your site, but previews in the admin settings page will only work for fonts uploaded or connected through the plugin.

How do I upload custom fonts?

  1. Go to Settings → Typography Stylist → Custom Fonts tab
  2. Enter a name for your font kit
  3. Click "Choose ZIP File" and select your webfont kit ZIP
  4. Click "Upload Font Kit"
The plugin will extract the fonts and make them available in the editor and preview selector. This has been tested with kits from MyFonts and Font Squirrel.

How do I add Adobe Fonts?

  1. Go to Settings → Typography Stylist → Custom Fonts tab
  2. Scroll to "Adobe Fonts (Typekit)" section
  3. Enter a project name
  4. Paste your Adobe Fonts embed code (the tag)
  5. Optionally enter font family names for the preview selector
  6. Click "Add Adobe Fonts Project"
Make sure your domain is authorized in your Adobe Fonts project settings, if applicable. The fonts will load directly from Adobe's servers.

How do I define custom fonts from my theme?

If you have fonts already loaded through your theme, another plugin, or a CDN:

  1. Go to Settings → Typography Stylist → Custom Fonts tab
  2. Scroll to "Custom Font Definitions" section
  3. Enter a display name for the font
  4. Enter the exact CSS font-family value (e.g., 'Playfair Display', serif)
  5. Optionally add fallback fonts separated by commas
  6. Click "Add Custom Font"
The font will be available in the block editor font selector, although features will not be available for preview on the admin settings page.

Can I set fallback fonts?

Yes! For any font source (uploaded, Adobe Fonts, or custom definitions), you can specify fallback fonts. These will be used if the primary font fails to load. Fallbacks are automatically included in the CSS font-family declaration.

Is this plugin accessible?

The plugin includes accessibility features for screen reader compatibility:

  • Inline Format Warnings: Detects when you select partial words (which can fragment text for screen readers) and shows a warning with options to convert to an accessible block or apply anyway
  • Typography Stylist Block: Custom block designed for complex typography that includes ARIA markup with screen reader-accessible text
  • ARIA Label Support: Optional setting to add aria-label attributes to inline formatted text (Settings → Typography Stylist → Accessibility)
  • Screen Reader Classes: the Typography Stylist block uses configurable classes (visually-hidden, sr-only, or custom) to hide styled text from screen readers while providing clean text
  • Dual Content Approach: The block provides duplicate content - one version styled for visual users, one clean version for assistive technology

How do the accessibility features for the block work?

the Typography Stylist block creates two versions of your text:

  1. For screen readers: Clean, unformatted text in a semantic heading element (H1-H6) with the visually-hidden class applied. This maintains the document outline and heading navigation for assistive technology users.
  2. For visual display: Styled text with aria-hidden="true" to prevent screen readers from reading fragmented content with complex OpenType features.
This approach provides both styled visual presentation and screen reader compatibility while preserving semantic document structure.

Should I use the inline format or the block?

  • Use Inline Format when applying features to complete words or phrases in existing heading blocks
  • Use Typography Stylist Block when you need letter-by-letter styling, complex typography, or maximum accessibility control
The plugin will warn you if an inline selection might cause accessibility issues.

What file formats are supported for font uploads?

The plugin accepts ZIP files containing:

  • CSS files with @font-face declarations
  • Font files: WOFF, WOFF2, TTF, OTF

Is font upload secure?

Yes! The plugin implements multiple security measures:

  • File type validation
  • ZIP extraction security
  • Path traversal protection
  • CSS sanitization
  • 10MB size limit for uploads
  • Secure storage with .htaccess protection

Is this compatible with page builders?

This plugin is designed for the WordPress block editor (Gutenberg). Compatibility with page builders depends on their implementation of rich text formatting.

Will this slow down my site?

The plugin uses CSS font-feature-settings which is hardware-accelerated in modern browsers. Performance impact depends on font file sizes and loading strategy. The plugin includes JavaScript in the block editor but uses only CSS for frontend rendering.

How do I know which features my font supports?

Check your font's documentation, or use the plugin to experiment. Features that aren't supported simply won't affect the text.

更新日志:

1.1.4 1.1.3