How to Install a Custom Font in WordPress

How to Install a Custom Font in WordPress

Option 1: Using a Plugin (Easiest Method)

If you want to avoid editing theme files, you can use a plugin.

Steps:

1. Log in to your WordPress Admin Dashboard.

2. Go to Plugins → Add New Plugin.

3. Search for one of these plugins:

– Use Any Font (very popular)

– Custom Fonts

– Fontsy

4. Click Install Now, then Activate.

5. Once activated, go to the plugin’s settings page (for Use Any Font, it’s under Settings → Use Any Font).

6. Upload your font files (.ttf, .woff, .woff2, or .otf).

7. Assign your custom font to specific HTML tags or elements (e.g., h1, p, .site-title) using the plugin’s options.

✅ Tip: “Use Any Font” handles hosting and CSS automatically — perfect if you just want to get the font working quickly.

—————

Option 2: Uploading Fonts Manually via Theme or Child Theme

If you prefer full control and no extra plugins, upload the font files yourself.

Steps:

1. Prepare your font files in web-safe formats (.woff and .woff2 recommended).

2. Using your file manager or FTP/SFTP, navigate to your theme folder:

/wp-content/themes/your-theme-name/

3. Create a new folder named fonts inside it:

/wp-content/themes/your-theme-name/fonts/

4. Upload your font files into that fonts folder.

5. Next, edit your theme’s style.css (or a child theme’s style.css). Add this CSS:

@font-face {
    font-family: 'MyCustomFont';
    src: url('fonts/MyCustomFont.woff2') format('woff2'),
         url('fonts/MyCustomFont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

body, p, h1, h2, h3 {
    font-family: 'MyCustomFont', sans-serif;
}

6. Save the file, and clear your cache (browser + WordPress caching plugin if used).

⚠️ Tip: Always use a child theme to prevent your changes from being overwritten during theme updates.

—————

Option 3: Using a Page Builder (e.g., Elementor or Divi)

If your site uses a builder, many allow font uploads directly.

In Elementor Pro:

1. Go to Elementor → Custom Fonts.

2. Click Add New.

3. Upload your font files for each weight/style (Regular, Bold, Italic, etc.).

4. Save your font.

5. Now, in Elementor widgets, open Typography → Family and select your new font.

—————

Option 4: Linking an External Font (if hosted elsewhere)

If your font is hosted on another server or service (e.g., Adobe Fonts or Google Fonts):

1. Copy the provided embed code or CSS link.

2. Go to Appearance → Customize → Additional CSS.

3. Paste the link, for example:

<link rel="stylesheet" href="https://example.com/fonts/MyCustomFont.css">

4. Then apply the font in your CSS as usual:

h1, h2, h3 {
    font-family: 'MyCustomFont', sans-serif;
}

—————

Final Tip

If your font doesn’t appear after upload: - Make sure the file paths are correct.
- Clear WordPress + browser cache.
- Verify your CSS selectors match the correct elements.

    • Related Articles

    • How to Replace WordPress Cron with a Real Cron Job

      Have you ever noticed that your scheduled posts in WordPress are missing? Though WordPress has its own cron feature that dictates the scheduling of your blog’s posts and events, WP-cron is not a literal cron job. Linux cron job vs. WP-cron The user ...

    • Setting the Default Blog Archive Page in WordPress (Using Elementor Template Kits)

      If you’re using an Elementor Template Kit, your Blog Archive page (the page that lists your blog posts) may not automatically display correctly until you designate it as the default “Posts Page” in WordPress and apply the correct Elementor template. ...

    • Running WP-CLI as Root to Import Posts for a cPanel User

      Overview This guide explains how to safely run WP-CLI commands in WHM Terminal as the root user to perform WordPress imports for a specific cPanel account. This method does not require enabling shell access for the cPanel user and ensures that no ...

    • How to Get Google Sitelinks for Your Website

      Google sometimes shows extra sub-links under your website’s main search result. These are called sitelinks, and they help users navigate directly to important pages of your site. You can’t turn them on manually, but you can improve your chances of ...

    • Popular Articles

    • How to install Office Apps (365) to your Windows or Mac computer

      How to Download and Install Microsoft 365 Office Apps (Windows and Mac) This guide will walk you through downloading and installing the Microsoft 365 Office apps, including Word, Excel, PowerPoint, Outlook, and more. The steps are nearly the same for ...

    • How to Save and Share a Document in OneDrive from Word or Excel

      Follow these steps to save your document to OneDrive and share it with others directly from Word or Excel. ————— Step 1: Save to OneDrive 1. In Word or Excel, click File. 2. Select Save As. 3. Choose OneDrive – [Your Organization or Personal]. 4. ...

    • How to Collaborate on a Document in Real-Time with Others

      Microsoft 365 allows you to co-author documents with colleagues in Word, Excel, or PowerPoint. ————— Step 1: Save to OneDrive or SharePoint 1. Open your file in Word, Excel, or PowerPoint. 2. Click File > Save As and select OneDrive or SharePoint. ...

    • How to Recover Unsaved or Previous Versions of Office Files

      If you lose changes or accidentally close a document, you can often recover it using Office’s built-in recovery tools. ————— Step 1: Recover Unsaved Files 1. Open Word, Excel, or PowerPoint. 2. Go to File > Info > Manage Document (or Manage ...

    • How to Use Templates in Word, Excel, and PowerPoint

      Microsoft Office apps come with ready-to-use templates to save you time. ————— Step 1: Access Templates 1. Open Word, Excel, or PowerPoint. 2. From the start screen, you’ll see featured templates. 3. Or click File > New to browse available templates. ...