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.