How to Add Custom Fonts to WordPress: 5 Methods (2025 Guide)

Custom fonts help your WordPress site stand out and match your brand identity. This guide covers five methods to add custom fonts, from the built-in WordPress font library to manual code implementation.

Method 1: WordPress Built-in Font Library (WordPress 6.5+)

WordPress 6.5 introduced a native custom fonts feature. No plugins required – just upload and use.

Upload a Custom Font

1. Go to Appearance → Editor (Site Editor)
2. Click the Styles icon (half-filled circle) in the top right
3. Select Typography
4. Click Manage fonts (the icon showing stacked fonts)
5. Select the Upload tab
6. Drag and drop your font files or click to browse
7. Click Upload

Supported formats: TTF, OTF, WOFF, WOFF2

Add Google Fonts (GDPR-Compliant)

WordPress 6.5+ also lets you install Google Fonts locally, which means fonts are served from your server rather than Google’s – important for GDPR compliance in the EU.

1. Go to Appearance → Editor → Styles → Typography
2. Click Manage fonts
3. Select the Install fonts tab
4. Browse or search for a Google Font
5. Select the font weights you need
6. Click Install

The fonts are downloaded and stored on your server, so no requests go to Google.

Apply Your Custom Font

1. Still in Styles → Typography
2. Click on a text element (Text, Links, Headings, Captions, or Buttons)
3. Select your uploaded font from the dropdown
4. Adjust size, weight, and other settings
5. Click Save

Method 2: Theme Customiser (Classic Themes)

For classic WordPress themes that don’t use the Site Editor:

1. Go to Appearance → Customise
2. Look for Typography, Fonts, or Design (varies by theme)
3. Select your heading and body fonts from the available options
4. Click Publish

Available fonts depend on your theme. Premium themes often include more font options than free themes.

Method 3: Font Plugins

Plugins offer more flexibility, especially for older WordPress versions or themes without built-in font options.

Recommended Plugins

Use Any Font

• Upload any font file (TTF, OTF, WOFF)
• Converts fonts to web format automatically
• Assign fonts to specific elements via settings
• Free version allows one custom font

Fonts Plugin | Google Fonts Typography

• Access to all Google Fonts
• Host fonts locally for GDPR compliance
• Upload custom fonts (Pro version)
• Apply fonts to any CSS selector

Custom Fonts

• Works with Astra, Elementor, and Beaver Builder
• Upload font files directly
• Add font variations (weights and styles)
• Free and lightweight

Basic Plugin Setup

1. Install and activate your chosen plugin
2. Navigate to the plugin’s settings (usually under Appearance or Settings)
3. Upload your font files or connect to Google Fonts
4. Assign fonts to headings, body text, and other elements
5. Save changes

Method 4: Elementor Custom Fonts

If you use Elementor Pro, custom fonts are built in:

1. Go to Elementor → Custom Fonts
2. Click Add New
3. Name your font family
4. Click Add Font Variation
5. Upload font files for each weight/style you need
6. Click Publish

Your font now appears in Elementor’s typography settings when editing any text element.

For Elementor Free users: Use the Custom Fonts plugin mentioned above – it integrates seamlessly with Elementor.

Method 5: Manual CSS (@font-face)

For complete control, add custom fonts using CSS. This method works with any theme.

Step 1: Upload Font Files

1. Connect to your site via FTP or File Manager
2. Create a folder: wp-content/themes/your-theme/fonts/
3. Upload your font files (WOFF2 and WOFF recommended)

Step 2: Add CSS

Add this CSS to your theme’s style.css or via Appearance → Customise → Additional CSS:

/* Define the font */
@font-face {
    font-family: 'YourFontName';
    src: url('/wp-content/themes/your-theme/fonts/your-font.woff2') format('woff2'),
         url('/wp-content/themes/your-theme/fonts/your-font.woff') format('woff');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

/* Apply to body text */
body {
    font-family: 'YourFontName', sans-serif;
}

/* Apply to headings */
h1, h2, h3, h4, h5, h6 {
    font-family: 'YourFontName', sans-serif;
}

Replace YourFontName and file paths with your actual font details.

Add Multiple Weights

For fonts with multiple weights:

@font-face {
    font-family: 'YourFontName';
    src: url('fonts/your-font-regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'YourFontName';
    src: url('fonts/your-font-bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

Font Format Guide

Use the right format for best browser compatibility and performance:

Format	Best For	Browser Support
WOFF2	Primary format – smallest size	All modern browsers
WOFF	Fallback for older browsers	IE 9+, all modern
TTF	System fonts, not optimised for web	Broad support
OTF	Advanced typography features	Most browsers
EOT	Legacy IE support only	IE 6-8

Recommendation: Provide WOFF2 with WOFF as fallback. This covers 99%+ of users.

Convert Fonts to Web Format

If your font is TTF or OTF, convert it to web formats using:

• Font Squirrel Webfont Generator (free)
• Transfonter (free, includes subsetting)

Important: Only convert fonts you have the proper licence for. Check if your licence permits web embedding.

Where to Find Custom Fonts

Free Fonts

• Google Fonts – 1,500+ free fonts, open source
• Font Squirrel – Curated free fonts, commercially safe
• DaFont – Large library, check licences carefully
• Font Library – Open source fonts

Premium Fonts

• Adobe Fonts – Included with Creative Cloud
• MyFonts – Largest font marketplace
• FontShop – High-quality professional fonts
• Hoefler&Co – Premium type design

Performance Optimisation

Custom fonts can slow down your site if not optimised properly.

Use font-display: swap

This CSS property shows a fallback font while your custom font loads, preventing invisible text:

@font-face {
    font-family: 'YourFont';
    src: url('font.woff2') format('woff2');
    font-display: swap;
}

Preload Critical Fonts

Add this to your site’s <head> to load important fonts earlier:

<link rel="preload" href="/fonts/your-font.woff2" as="font" type="font/woff2" crossorigin>

Subset Your Fonts

Remove characters you don’t need. A full font file might include Greek, Cyrillic, and special characters. If you only use Latin, subset to reduce file size by 50-80%.

Tools like Font Squirrel and Transfonter offer subsetting options.

Limit Font Weights and Styles

Each weight (400, 700) and style (normal, italic) requires a separate file. Only include what you actually use:

• Minimum: Regular (400) and Bold (700)
• Optional: Add Light (300) or Italic if needed
• Avoid: Loading all available weights “just in case”

Best Practices

Limit to 2-3 Font Families

More fonts mean more HTTP requests and larger page size. A typical setup:

• Headings: One distinctive font for brand personality
• Body text: One readable font for long-form content
• Accent: Optional third font for specific elements

Prioritise Readability

• Body text should be at least 16px (preferably 18px)
• Use adequate line-height (1.5-1.8 for body text)
• Ensure sufficient contrast between text and background
• Avoid decorative fonts for body copy

Test Across Devices

Fonts render differently on Windows, Mac, iOS, and Android. Check your custom fonts on multiple devices and browsers before launch.

Always Include Fallbacks

Specify system fonts as fallbacks in case your custom font fails to load:

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

GDPR and Self-Hosting Fonts

Loading fonts from Google’s servers sends visitor IP addresses to Google, which raises GDPR concerns in Europe. German courts have ruled this as potentially non-compliant.

Solutions:

• Use WordPress 6.5+ to install Google Fonts locally
• Download fonts from Google Fonts and self-host them
• Use plugins that host fonts locally (e.g., OMGF plugin)
• Use system fonts that don’t require external requests

FAQ

Will custom fonts slow down my site?

They can, but proper optimisation minimises the impact. Use WOFF2 format, subset fonts, limit weights, and use font-display: swap. A well-optimised font adds only 20-50KB per weight.

Can I use any font I find online?

No. Fonts are licensed works. Check the licence before using any font. Google Fonts and Font Squirrel offer fonts with permissive licences for web use. Premium fonts require purchasing a web licence.

Why isn’t my custom font showing?

Common causes:

• Incorrect file path in CSS
• Font file not uploaded to the correct location
• Caching – clear your browser and site cache
• CSS specificity – another style is overriding your font
• CORS issues when loading from a different domain

What are variable fonts?

Variable fonts contain multiple weights and styles in a single file, reducing HTTP requests and file size. Instead of loading regular.woff2 and bold.woff2 separately, one variable font file handles all variations. WordPress 6.5+ supports variable fonts.

How many fonts is too many?

Stick to 2-3 font families maximum. Each additional font increases page load time and can make your design feel chaotic. If you need visual variety, use different weights and sizes of the same font family.