Custom Fonts

Upload and manage self-hosted fonts directly inside the ThemePlus options panel.

Overview

The Custom Fonts module is a built-in section that appears automatically in the ThemePlus sidebar — no configuration or code required from the theme developer. It provides a complete font management interface for uploading, naming, and deleting self-hosted fonts, which then appear inside the Typography field alongside Google Fonts.

Supported Formats

Every uploaded file is verified against its magic bytes — a file renamed to .woff2 without valid font headers is rejected. Only users with the configured capability (default edit_theme_options) can upload font files.

How It Works

1. Open the Custom Fonts section in the options panel sidebar
2. Click Add Font and give the font a name
3. Upload WOFF2 and/or WOFF files for each weight variant (Regular, Italic, Bold, Bold Italic)
4. Save — the font is now available in every Typography field across the panel

ThemePlus generates @font-face CSS rules automatically and enqueues them on the frontend. No manual CSS or wp_enqueue_style() calls are needed in your theme.

Typography Field Integration

Uploaded custom fonts appear inside the Typography field’s font selector alongside Google Fonts and system fonts. ThemePlus automatically detects custom font names and excludes them from Google Fonts requests — a font named “MyBrand” will never trigger a Google API call.

Gutenberg and Elementor Integration

Custom fonts are automatically registered with:

• Gutenberg — fonts appear in the block editor’s typography controls and are enqueued inside the editor iframe
• Elementor — fonts appear in Elementor’s font selector under a “Custom Fonts” group

No additional setup is needed for either integration.

Using a Custom Font in Template Code

Custom fonts are set by users through the Typography field — retrieve the saved value and use the font-family key:

$body_font   = themeplus_get_option( 'body_typography', [] );
$font_family = $body_font['font-family'] ?? 'system-ui';

echo '<style>
    body {
        font-family: "' . esc_attr( $font_family ) . '", sans-serif;
    }
</style>';

ThemePlus handles the @font-face enqueue automatically — you only need to use the family name in your CSS. No attachment IDs, no URLs, no manual font loading.

Reset Behavior

Custom fonts are not affected by Reset All or Reset Section. This is intentional — custom fonts are uploaded assets stored in the WordPress Media Library, not option values. Resetting settings should never silently delete files a user has uploaded and licensed.

To remove a custom font: open the Custom Fonts section, find the font row, and click Delete. This removes the font registration and its files from the Media Library.

Notes

• Font names are case-sensitive in CSS — the name you enter during upload becomes the font-family value exactly as typed.
• Upload WOFF2 first — it is the preferred format and loads first in the generated @font-face rule. WOFF is used as a fallback for older browsers.
• If a custom font does not appear in the Typography field after upload, verify the upload succeeded and the file extension matches the actual font format — the magic-byte check rejects misnamed files.
• Custom fonts are stored as WordPress Media Library attachments. They appear in the Media Library and count toward storage quota.
• CORS headers (Access-Control-Allow-Origin: *) are added automatically for .woff and .woff2 file requests — required for fonts to load correctly when your WordPress installation and site URL are on different domains.