Custom Fonts Manager

Upload your own web fonts to use throughout your WordPress site. Whether you have a licensed premium font, a self-hosted Google Font alternative, or a custom brand typeface, this module makes it easy to use custom typography without external dependencies.

Use Cases#

• Use your brand’s custom typeface throughout your website
• Self-host Google Fonts for GDPR compliance and improved performance
• Apply premium fonts from services like Adobe Fonts or purchased font licenses
• Set different fonts for body text and headings for typographic contrast

How It Works#

1. Upload your font files (WOFF2, WOFF, or TTF) to your WordPress media library
2. Enter the font name and paste the file URLs in settings
3. Toggle whether to auto-apply to body text and/or headings
4. The module generates @font-face CSS and applies it site-wide

Supported Font Formats#

Settings#

Body Font#

Apply a custom font to paragraphs, lists, and general body text.

Heading Font#

Apply a different custom font to h1-h6 headings and titles.

Uploading Font Files#

Step 1: Enable Font Uploads#

The module automatically enables font file uploads to your WordPress media library. Supported types: .woff2, .woff, .ttf, .otf, .eot

Step 2: Upload Your Font#

1. Go to Media → Add New
2. Upload your font file
3. Click on the uploaded font
4. Copy the “File URL” from the attachment details

Step 3: Add to Settings#

Paste the copied URL into the appropriate font format field in the module settings.

Applying Fonts#

Automatic Application#

Toggle on “Apply to Body Text” or “Apply to Headings” to automatically use your fonts:

Body font applies to:

• body, p, div, span
• li, td, th
• input, textarea, select, button

Heading font applies to:

• h1, h2, h3, h4, h5, h6
• .site-title, .entry-title

Manual CSS Usage#

If you prefer manual control, leave the auto-apply toggles off and use the font name in your custom CSS:

.my-special-element {
    font-family: 'YourFontName', sans-serif;
}

.hero-headline {
    font-family: 'YourHeadingFont', serif;
}

Page Builder Integration#

Most page builders (Elementor, Divi, Beaver Builder) let you enter custom font names:

1. Open typography settings for an element
2. Choose “Custom” or type the font name
3. Enter your font name exactly as configured

Generated CSS Preview#

The settings page shows a preview of the CSS that will be generated. This helps you:

• Verify font names are correct
• See the @font-face declarations
• Copy CSS for use elsewhere

Example generated CSS:

@font-face {
    font-family: 'Inter';
    src: url('https://example.com/fonts/inter.woff2') format('woff2'),
         url('https://example.com/fonts/inter.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

body, p, div, span, li, td, th, input, textarea, select, button {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
}

Performance Considerations#

Font Display#

The module uses font-display: swap, which means:

• Text displays immediately with a fallback font
• Custom font swaps in when loaded
• No invisible text while fonts load

Fallback Stack#

Fonts include a system font fallback stack:

font-family: 'YourFont', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

This ensures readable text even if the custom font fails to load.

Self-Hosting Google Fonts#

To self-host Google Fonts for GDPR compliance or performance:

1. Visit Google Webfonts Helper
2. Select your font and character sets
3. Download the font files
4. Upload to your WordPress media library
5. Configure in Custom Fonts Manager

This eliminates external requests to Google’s servers.

Font Weight Variations#

The module supports normal weight fonts. For multiple weights (bold, light, etc.), you’ll need to:

1. Create separate @font-face rules for each weight
2. Use the Header & Footer Code module to add additional CSS
3. Or use your theme’s custom CSS section

Example for adding bold weight:

@font-face {
    font-family: 'Inter';
    src: url('/path/to/inter-bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

FAQ#