Font Management In Spectra

Transform your website’s typography with Spectra v3’s powerful font management system. Choose from 1500+ Google Fonts and control which ones are available to all blocks that support typography controls – including Spectra blocks, WordPress core blocks with font family support, and compatible third-party blocks. Control fonts site-wide from one central location.

How to Change Fonts (Quick Steps)

1. Select any Spectra block
2. Go to the Style tab (on the right sidebar)
3. Open Typography section
4. Click Font dropdown
5. Pick your favorite font!

Complete process: from selecting a block to choosing fonts

Font Settings (Important!)

Go to: WordPress Admin → Spectra → Settings → Performance

These settings control how fonts work across your entire website – not just Spectra blocks!

Spectra Performance settings where you control all font options

Step-by-step: How to configure font settings in Spectra Performance tab

Choose Which Fonts to Use

Setting: “Allow Only Selected Fonts”

What this controls: This setting determines which fonts appear in the font family dropdown for ALL blocks in your WordPress editor.

How it works:

• Nothing selected? Available fonts include:
  • Inter and Cardo (Spectra’s default fonts)
  • Theme fonts (if using block theme: theme’s default fonts plus any additional fonts added through FSE Styles → Typography)
• Select specific fonts? Only your chosen fonts will show up in the dropdown plus theme fonts (if using block theme: theme’s default fonts plus any additional fonts added through FSE Styles → Typography)
• Turn off this setting completely? Only Spectra default fonts (Inter and Cardo) plus theme fonts (if using block theme: theme’s default fonts plus any additional fonts added through FSE Styles → Typography)

Why this matters:

• Selected fonts work in all blocks that have typography controls – WordPress core blocks (Paragraph, Heading, etc.), third-party blocks with font family support, and Spectra blocks
• This is a site-wide font management system
• Helps maintain consistent typography across your entire website
• Improves performance by loading only the fonts you actually use

Best practice: Choose 2-4 fonts maximum for better website performance and design consistency.

Make Fonts Load Faster

Setting: “Load Google Fonts Locally”

What it does: Downloads fonts to your website for faster loading

Benefits:

• Faster website
• Better privacy
• Works offline

What Fonts Can I Use?

Spectra offers 1500+ Google font options. If this is overwhelming for your clients, you can use this option to show only limited number of fonts in the block settings.

Font Management Through FSE (Block Themes Only)

You can also manage fonts through Appearance → Editor → Styles → Typography. Here you can upload custom fonts, add Google Fonts, manage font families, and control all typography settings. Any fonts you add or manage here will appear in your font dropdown across all blocks.

Note: This option is only available if you’re using a block theme (like Twenty Twenty-Three, Twenty Twenty-Four, or other FSE themes).

Complete font management through the Full Site Editor

Common Problems & Fixes

“My fonts aren’t showing up”

Check if “Allow Only Selected Fonts” includes your font
Make sure fonts are selected in Performance settings
Clear cache and refresh

“Fonts load slowly”

Turn ON “Load Google Fonts Locally”
Use fewer font styles (Regular + Bold is enough)
Choose only essential fonts in your selection

“Can’t find a specific font”

• Check if “Allow Only Selected Fonts” is limiting options
• Try adding it through Appearance → Editor → Style