Roboto in headings, Open Sans in body text. The site's typography looks like half of all WordPress installations. The visitor noticed the pattern, recognized the font, and the site lost part of its individuality before the first paragraph.

A custom font connects to WordPress in two ways: through a plugin in 2 minutes without a single line of code, or manually via @font-face with full control over the files. Both work reliably, the choice depends on your experience with CSS.

Below we'll cover where to get fonts, how to set up a plugin, and how to add @font-face in a child theme. The code is taken from working installations: paste it, replace the filename, and your typography is ready.

💡 Quick overview:

• Download a font from DaFont or FontSquirrel in WOFF2 or TTF format: at least three weights (regular, bold, italic).
• Install Use Any Font or Fonts Plugin, upload the file through the admin panel and assign the font to elements. No code needed.
• Or connect manually: create a fonts folder in the child theme, upload files via FTP and add @font-face in style.css for each weight.
• Check the display in several browsers and don't install more than two custom fonts: each file increases page weight.

Where to get fonts and in what format

Everyone knows Google Fonts, which is exactly why they're everywhere. If you need something less overused, here are three proven sources.

DaFont offers over 3,500 fonts with categories from comics to vintage. Most are free for personal use. For commercial projects, check the license of each file separately, they're listed on the font page.

FontSquirrel focuses on free fonts with commercial licenses. The collection is small, but each font has been vetted by lawyers. The built-in generator converts a downloaded file to WOFF and WOFF2 with one click.

FontSpring sells paid fonts, but almost every family has one or two free weights. Read the license carefully before downloading: different weights may have different terms.

General rule: don't put more than two custom fonts on a site. One for headings, another for body text, that's enough. Each file adds an HTTP request and increases page weight by 30-100 KB.

Download all weights at once: regular, bold, italic, and bold italic. If the file only has one weight, the browser will fake bold and italic with artificial thickening, the result looks crude.

Method 1: plugin in 2 minutes

A plugin, the simplest path. Installed, uploaded the font file, chose where to apply it. No code, no FTP connections.

Use Any Font

🔗 Use Any Font on WordPress.org

🔗 Screenshots and demo

Uploads fonts in TTF, OTF and WOFF formats, automatically converts to WOFF2 with Brotli compression. According to the plugin page on WordPress.org, loading speeds up by approximately 30%. Fonts are stored on your server: GDPR compliance out of the box, no dependency on external APIs after conversion.

After installation you get an API key (the free Lite key gives one conversion), upload the file and assign the font through the visual interface. You can apply it to headings, paragraphs or specific blocks directly from the admin panel.

Supports integration with Elementor, Divi, WPBakery, Gutenberg: assign the font once in the plugin, it appears in the builder's font list.

Note: for multiple fonts you need a Premium key. For a typical site the free version is enough: one brand font for headings, Google Fonts for text.

Fonts Plugin

🔗 Fonts Plugin on WordPress.org

🔗 Plugin screenshots

Former Olympus Google Fonts: renamed, functionality expanded. According to the plugin page, it has 200,000+ active installations and a 5-star rating from over 1,200 users. Supports Google Fonts, Adobe Fonts (Typekit) and uploading custom files.

Setup goes through the customizer: select a font, see a live preview, save.

The Pro version adds local hosting of Google Fonts for GDPR, selective loading of only needed weights and control of size, color, line height. The free version is enough for most sites.

Plugin or manual: when to choose what

A plugin wins on speed: 2-minute installation, no code needed. But you depend on plugin updates and its compatibility with WordPress version.

Manual installation via @font-face is more complex to set up, but you control every byte. No third-party APIs, no updates breaking your typography.

If you already work with a child theme, the manual method will fit organically into your CSS. Fonts become part of the theme and will live there for years.

Method 2: manual installation via @font-face

The @font-face directive connects font files directly from your server. Supported formats are TTF, OTF, WOFF, WOFF2 and SVG. Each weight needs a separate code block.

But after setup you forget about typography for years: WordPress and theme updates won't affect fonts, they sit in your child theme and load every time as part of CSS.

Before starting, create a child theme: all edits go into it, the parent theme stays untouched and will update without losing your changes.

Step 1: create a folder for fonts

In the child theme folder, create a fonts directory. Add it via FTP or hosting file manager:

1
wp-content/themes/your-child-theme/fonts/

If your child theme is called twentytwentyfour-child, the path will be wp-content/themes/twentytwentyfour-child/fonts/.

Step 2: upload font files to the server

Copy the downloaded files to the fonts folder via FTP or hosting file manager. For each weight, a separate file:

1
fonts/WebFont.woff2
2
fonts/WebFont.woff
3
fonts/WebFont-Bold.woff2
4
fonts/WebFont-Bold.woff
5
fonts/WebFont-Italic.woff2
6
fonts/WebFont-Italic.woff

In practice, WOFF and WOFF2 formats are enough: they cover all modern browsers and weigh less than TTF. According to MDN Web Docs, WOFF2 compresses a font 30% more efficiently than WOFF and is supported by all browsers since 2016.

The browser will choose the appropriate format from those connected: if it supports WOFF2, it will load that, if not, it will take WOFF.

Step 3: add @font-face in style.css

Open the child theme's style.css and add code after the theme header (the comment with the theme name and description). Start with the regular weight:

1
@font-face {
2
    font-family: 'MyWebFont';
3
    src: url('fonts/WebFont.woff2') format('woff2'),
4
         url('fonts/WebFont.woff') format('woff');
5
    font-weight: normal;
6
    font-style: normal;
7
}

font-family, the font name you'll use in CSS. Name it so you don't confuse it with system fonts: not Arial, but MyBrandSans or BrandHeading. src, path to files relative to style.css. Order matters: WOFF2 first (lightest), WOFF second (fallback for older browsers).

Step 4: add italic

1
@font-face {
2
    font-family: 'MyWebFont';
3
    src: url('fonts/WebFont-Italic.woff2') format('woff2'),
4
         url('fonts/WebFont-Italic.woff') format('woff');
5
    font-weight: normal;
6
    font-style: italic;
7
}

Note: font-family is the same, font-weight stays normal, and font-style changes to italic. The browser will substitute the right file for the em tag and the font-style: italic property.

Step 5: add bold weight

1
@font-face {
2
    font-family: 'MyWebFont';
3
    src: url('fonts/WebFont-Bold.woff2') format('woff2'),
4
         url('fonts/WebFont-Bold.woff') format('woff');
5
    font-weight: bold;
6
    font-style: normal;
7
}

Here font-style is normal again, and font-weight is now bold. Now the strong tag and the font-weight: bold property will render with your bold file, not browser-faked thickening. The difference is noticeable: real bold weight is balanced by the font designer, faking looks crude.

Step 6: bold italic (optional)

1
@font-face {
2
    font-family: 'MyWebFont';
3
    src: url('fonts/WebFont-BoldItalic.woff2') format('woff2'),
4
         url('fonts/WebFont-BoldItalic.woff') format('woff');
5
    font-weight: bold;
6
    font-style: italic;
7
}

Four weights cover practically all typographic tasks of a regular site. If the design doesn't require bold italic, skip this step: the file won't load until CSS explicitly requests the bold + italic combination.

Step 7: apply the font to elements

After @font-face add rules that assign the font to specific elements. Add to the child theme's style.css:

1
body {
2
    font-family: 'MyWebFont', Arial, sans-serif;
3
}
4
 
5
h1, h2, h3 {
6
    font-family: 'MyWebFont', Georgia, serif;
7
}

The first rule: your font for body text, with a fallback to system Arial. The second: the same font for headings, with a fallback to Georgia.

If the font file doesn't load (server is down or path is wrong), the site won't be left without text: the browser will show Arial or Georgia. A fallback is mandatory: without it the browser will substitute the system default font, usually Times New Roman, and typography will fall apart.

Done. A custom font is connected without plugins and external services. Typography lives on your server and won't break if a third-party API changes terms or goes down.

Video: step-by-step setup on a live site

Watch how the entire process looks on a real WordPress site from choosing a font to applying it to headings:

The video shows both methods: via plugin and via @font-face. It's convenient to pause and follow along. The video is in English, but the process is visually clear even without audio.

⁉️🤔 Frequently asked questions

How many custom fonts can I add to a site?

No more than two: one for headings, another for body text. Each font carries several weight files from 30 to 100 KB each. Two fonts will add noticeable volume to page load. A third will noticeably worsen speed, especially on slow mobile connections.

Is it mandatory to create a child theme for @font-face?

Formally no: you can insert @font-face directly into the parent theme's style.css. But after the next theme update all edits will disappear. A child theme solves this once and for all. If you haven't created one yet, our WordPress child theme guide will walk you from installation to first result.

Which file format to choose: WOFF, WOFF2 or TTF?

WOFF2, as priority. It compresses a font noticeably more than WOFF and is supported by all modern browsers. WOFF, as backup for older browser versions. Connect TTF and OTF only if the font is not available in web formats: they're not compressed and weigh twice as much. Order in src is always: WOFF2, then WOFF.

Why doesn't the font display after installation?

Three common causes. First: the path to the file in url() is wrong, check that the path is built from style.css, not from the site root. Second: browser cache is holding old CSS, open the site in incognito or clear cache with Ctrl+F5. Third: conflict with a theme that overrides font-family with higher priority, check in the inspector which CSS selector is actually applied to the text.

Do I need to specify format() in src?

Formally the browser determines the format itself from file headers. But explicit format('woff2') speeds up selection: the browser doesn't download a file it definitely doesn't support. So always specify it. This is a recommendation of the CSS Fonts Level 4 specification.

How do I check that the font is loading from my server and not externally?

Open DevTools (F12), Network tab, Fonts filter, refresh the page. The list should only have files from your domain. If you see fonts.googleapis.com or fonts.gstatic.com, Google Fonts are loading externally. For GDPR compliance, move them to local hosting via Fonts Plugin Pro or download manually and connect via @font-face.

Which font connection method to choose?

Both methods work reliably. The choice depends on what's more important to you: setup speed or control over every byte.

Installing a font for the first time and don't want to touch code, take Use Any Font. Uploaded the file, assigned to headings, done. The free version is enough for one brand font on headings.

Need access to the Google Fonts catalog with live preview right in the customizer, take Fonts Plugin. The free version is enough for most tasks, Pro is only needed for local hosting of Google Fonts under GDPR.

Already working with a child theme and used to editing CSS manually, choose @font-face. Zero external dependencies, full control, and after setup you don't think about typography for years. Theme updates won't affect fonts, they live in your child theme as part of CSS.

Start with a plugin: it's 2 minutes and no risk. What font is on your site now, the theme default or did you already connect your own?