Adding a custom font to your WordPress website is a great way to make your site stand out and enhance your brand identity. While WordPress offers a range of default fonts, using a unique font helps you achieve a distinctive look that communicates the feel of your brand.
Is your business serious and technical or playful and joyous? Maybe your company has a futuristic focus or a retro vibe, like Chia Pet’s WooCommerce store. Custom fonts can communicate these and other nuanced moods to visitors.
If you’re interested in adding a specific font to your WordPress website, there are a few different ways to do it. It can be as easy as choosing a custom Google font in the default WordPress settings or using a plugin. If you’ve got some coding knowledge, you can also add a custom font within a child theme.
This guide will walk you through each of these methods for adding custom fonts, while ensuring compatibility, performance, and accessibility.
Understanding font formats and compatibility
Before adding custom fonts, you must understand different font formats and their compatibility with various browsers.
Common font formats
- TTF (TrueType Font): Compatible with most browsers but can be large in file size.
- OTF (OpenType Font): Similar to TTF but supports advanced typographic features.
- WOFF (Web Open Font Format): Optimized for the web, offering better compression.
- WOFF2: More efficient than WOFF, providing better performance.
- EOT (Embedded OpenType): Used by older versions of Internet Explorer.
Choosing the right format
For optimal compatibility, use WOFF and WOFF2. These formats are lightweight and widely supported by modern browsers.
4 Ways to add custom fonts to WordPress
There are multiple ways to add custom fonts to WordPress. Each method has its own advantages based on ease of implementation and customization needs.
1. Using the WordPress Font Library
The Font Library is a feature that is included by default in WordPress versions 6.5 and later. It natively supports Google Fonts and allows you to upload your own fonts, but will only work with themes that support the block editor and full site editing under Appearance → Editor. If your theme uses the Customizer feature, skip to the number two method on this list.
Where to find the Font Library
- Head to Appearance → Editor in your WordPress dashboard.
- Click Styles in the left-hand menu.
- Click the edit icon (pencil) next to the Styles heading.
- Click on Typography in the Styles panel at the right.
- Scroll down to the Fonts section and click on the Manage Fonts icon (control slider).
How to add custom fonts to the Font Library
The Manage Fonts panel has three tabs:
- Library: Shows all installed and theme fonts.
- Upload: Add your own fonts (supports .ttf, .otf, .woff, and .woff2).
- Install Fonts: Browse and install Google Fonts after granting access (which you can revoke anytime).
Installing a Google Font
- First you’ll need to grant access to Google Fonts if you haven’t already.
- Search and pick a font.
- Select font variants.
- Click Install — done! The font will then appear as one of your font choices in the Library and Styles panels.
Uploading fonts
In the Upload tab in the Fonts Manager, simply drag your font file (.ttf, .otf, .woff, or .woff2) to the Upload font area and your font will automatically be installed. Like any Google Fonts you’ve installed, your uploaded fonts will also be available in the Library and Styles panels.
Removing fonts
You can disable font variants or remove fonts entirely in the Library tab in the Font Manager.
- Disable variants by unchecking them in the Library and clicking Update.
- Delete a font by selecting it, checking the box, and clicking Delete (confirmation required).
Changing default fonts
Fonts work globally (across your entire site) or on specific blocks. To change your fonts globally, go to Styles → Typography → Elements in the Editor, pick an element (text, headings, buttons, etc.), and customize the font, size, line height, and other aspects of your font’s appearance.
Pros: Easy to implement, no coding required.
Cons: Limited to block-enabled themes that allow full site editing.
2. Using the Customizer to enable custom Google Fonts (theme dependent)
If you are using a theme that uses the WordPress Customizer feature and has Google Fonts integrated already, you can add your custom fonts directly in the theme Customizer..
Steps:
- Go to Appearance → Customize
- Find the Typography or Fonts section (the exact location may be labeled slightly differently depending on your theme)
- Choose a Google Font from the dropdown
- Save and publish changes
Pros: Easy to implement, no coding required.
Cons: Limited to Google Fonts and may only be available in certain themes…
3. Adding custom fonts using a plugin
Plugins simplify font integration by handling file uploads and CSS generation. If you’re not comfortable with coding, your theme doesn’t support the Editor, or your theme doesn’t offer the custom fonts you need via the Customizer, this will be the easiest route to get your custom fonts installed.
Recommended plugins:
- Use Any Font – Upload any font file directly.
- Fonts Plugin – Easily use any Google Font.
- Local Google Fonts – Enables local storage of Google Fonts for faster loading speed and GDPR compliance.
Install a custom font with the Use Any Font plugin:
- Install and activate the Use Any Font plugin.
- Obtain the API key from the plugin settings.
- Upload your custom font (TTF, OTF, or WOFF).
- Assign the font to specific elements (e.g., body, headings).
- Save changes.
Pros: No need for manual coding.
Cons: Some features require a premium version.
4. Using a child theme for font integration
If you’re comfortable with adding some code to your site, you can add your custom fonts within a child theme. Using a child theme for theme customizations like incorporating new fonts or making changes to the theme stylesheet will prevent you losing those changes during theme updates.
The following instructions include a brief overview of creating a child theme in WordPress. You will need access to your site’s directory via cPanel, Plesk, SFTP, or SSH. You’ll also need a plain text editor or code editing software like Notepad++, Sublime Text, or Visual Studio Code to create and make changes to child theme files.
If you need more in-depth instructions for creating a child theme, read How to Create a Child Theme in WordPress.
- Create a child theme
- Navigate to wp-content/themes/ and create a new folder (e.g., yourtheme-child).
- Inside this folder, create a style.css file and a functions.php file.
- Define the child theme
- Add the following header inside style.css:
/*
Theme Name: Your Theme Child
Template: yourtheme
*/- Enqueue the custom font
- Open functions.php inside your child theme folder.
- Add the following code:
function custom_fonts() {
wp_enqueue_style('custom-fonts', get_stylesheet_directory_uri() . '/fonts.css');
}
add_action('wp_enqueue_scripts', 'custom_fonts');- Upload font files and create a fonts.css file
- Place the fonts in a /fonts/ directory within your main child theme directory.
- Create a fonts.css file in the main child theme directory and add @font-face CSS rules.
@font-face {
font-family: 'Custom Font Name';
src: url('wp-content/themes/your-theme-child/fonts/customfontname.woff2') format('woff2'),
font-weight: 300;
font-style: normal;
}- Activate the child theme
- Go to Appearance → Themes and activate your child theme.
Pros: Changes remain intact after theme updates.
Cons: Requires theme development knowledge.
How to ensure font performance and accessibility
Optimize font loading
Large font files slow down websites. To optimize performance:
- Use WOFF2 format for better compression.
- Limit the number of custom fonts to reduce HTTP requests.
- Use font-display: swap in CSS to improve rendering.
Ensure accessibility
- Ensure text remains readable when fonts fail to load.
- Provide fallback fonts like Arial, Helvetica, or sans-serif.
- Test fonts on different devices and browsers.
Troubleshooting and fixing common font problems
Font not displaying
- Check if the file paths are correct.
- Clear the site cache and CDN cache.
- Inspect the browser console for errors (Ctrl + Shift + I > Console).
Slow loading fonts
- Reduce font file size using font compression tools.
- Implement lazy loading for non-critical fonts.
- Host fonts on a CDN for faster delivery.
Enhancing typography with CSS
After you’ve added your custom fonts to your WordPress site, you can add global styles to headings, paragraphs, and other unique classes. Some of this can be done in the Editor or Customizer, but you can also do this with CSS. Make sure to make these style changes in your child theme’s style.css file.
Some examples include:
Adjusting font weight and style
h1, h2 {
font-weight: 700;
}
p {
font-style: italic;
}Improving readability with line height
body {
line-height: 1.6;
}Customizing font sizes for different screen sizes
@media (max-width: 768px) {
body {
font-size: 16px;
}
}Tips for font performance & accessibility
Adding fonts is easy, but optimizing them is what sets professionals apart. Keep these expert tips in mind:
Local vs. Google Fonts: Hosting fonts locally from your own server gives you full control and is often faster, ensuring better Core Web Vitals and GDPR compliance. Google Fonts are easy but require an external request, which can slow down your site.
Beware of CLS: Fonts that load slowly can cause Cumulative Layout Shift (CLS), a key Core Web Vital metric. To prevent this, use the font-display: swap; CSS property and preload your most important font files.
Limit Font Weights: Don’t load every font weight (such as: thin, light, regular, bold, black). Each one is a separate file that slows down your site. Only enqueue the specific weights you actually use.
Final thoughts on adding custom fonts
Adding custom fonts to WordPress enhances branding and improves user experience. Whether using WordPress’ default tools, a plugin, or manually adding fonts using a child theme, choosing the right approach depends on your expertise and requirements as well as what your theme supports.
Whatever method you choose, don’t forget to optimize fonts for performance to ensure better loading times and take accessibility considerations into account to improve usability for all visitors. Following best practices in those areas can help you achieve a visually appealing and professional website.
Managing typography and other aspects of website design is just one part of running a successful WordPress site. Your content matters, too. In fact, it’s probably the most important part — it’s what your readers and customers come to you for, after all.
But content creation, formatting, and optimization can be time-consuming. This is where automation tools like Jetpack AI Assistant can help streamline your workflow and enhance efficiency.
Simplify your WordPress workflows with Jetpack AI Assistant
Working with WordPress involves multiple tasks, from content creation to customization. Jetpack AI Assistant helps streamline these processes, allowing you to focus on design and user experience.
How Jetpack AI Assistant enhances workflow:
- Automated content generation: Generate high-quality blog posts, product descriptions, landing pages, tables, and translations effortlessly.
- Grammar and readability optimization: Ensure content clarity and consistency with AI-powered suggestions.
- Seamless integration: Works directly within the WordPress editor for a smooth user experience.
- Time-saving efficiency: Reduce content creation time, allowing you to prioritize design and branding.
By leveraging Jetpack AI Assistant, you can create engaging content while refining typography and font styles with ease. Explore how this AI-powered tool can optimize your workflow and enhance productivity.
Frequently asked questions
What is the best way to add custom fonts to WordPress?
For most people using new themes, the built-in WordPress Font Library is the best choice. It is easy to use and keeps font files on your own server, which helps your website load faster.
If you are a developer who wants full control, adding fonts with a child theme is the most powerful method. For people with older themes, a plugin is a simple and reliable option. You should pick the one that matches your technical skill and your website’s theme, as each method works well.
Can adding custom fonts slow down my website?
Yes, adding custom fonts can make your website slower. Each new font style is a file that visitors must download. More files mean the page takes longer to load.
To keep your site fast, only use the font styles you really need. Pick the modern WOFF2 format because its files are smaller. Keeping fonts on your own server is also usually faster than getting them from somewhere else. A fast website is important, so you should always check your speed after adding new fonts.
What is the difference between WOFF2, WOFF, and TTF font formats?
WOFF2 is the best font format for websites because it makes the smallest files. Smaller files help your website load much faster for visitors. WOFF is also made for the web and is a good second option. Older formats like TTF and OTF have much larger file sizes, which can slow down your site. For the best speed, you should always try to use WOFF2 files. Almost all modern web browsers can use WOFF2, so it is a safe and smart choice for your custom fonts.​
How many custom fonts are too many for one website?
You should use no more than two or three different fonts on your website. A good plan is to pick one font for your headlines and another font for your main text.
Using too many fonts can make your site look messy and unprofessional. It also slows down your website a lot because every font has to be downloaded. A simple design is easier for people to read. Sticking to just a few fonts creates a better experience for your visitors and helps your pages load quickly.​
How do I fix fonts that are not displaying correctly on my WordPress site?
First, you should try clearing your website’s cache and your web browser’s cache. Caching is the most common reason that new fonts do not show up right away.
If that does not solve the problem, look at the file paths in your CSS code to make sure they are correct. Even a small mistake can stop a font from loading. You can also use your browser’s developer tools to check the “Console” tab for any error messages. These errors often tell you exactly what is wrong.
Can I use Adobe Fonts (formerly Typekit) in WordPress?
Yes, you can use Adobe Fonts in WordPress. The easiest way is with a plugin made to connect your Adobe Fonts account to your website. You can also get a project ID from Adobe and add their special code to your site’s header.
You can usually do this in your theme’s settings or with a simple scripts plugin. This lets you use your Adobe Fonts on your site, but it does mean your site has to connect to Adobe’s service to get the font files.
What should I do if my WordPress theme does not have the Font Library?
If your theme does not have the Font Library, the simplest solution is to use a plugin. The Font Library only comes with newer block themes that support Full Site Editing in WordPress.
If you have an older or classic theme, it will not have this option. In that situation, a plugin like “Custom Fonts” or “Use Any Font” is your best choice. These tools let you upload your font files and apply them to your site without you needing to write any code.​
How can I choose a good custom font for my brand?
You should pick a font that matches your brand’s feeling and is also very easy to read. First, think about what you want your brand to express. A company that wants to appear serious might use a traditional serif font. A technology company might use a clean sans-serif font to look more modern.
Always make sure the font is easy to read. The text must be clear on all devices, especially on small mobile phones. Test the font in different sizes to be sure it looks good for both big headlines and smaller text.
Are custom fonts good for SEO?
Yes, custom fonts are good for your site’s SEO if you use them the right way. Search engines like websites that are easy for people to use. A font that is clear and easy to read helps people stay on your page longer, which sends good signals to search engines.
However, if your font files are very large and make your website slow, that will hurt your SEO. The secret is to use optimized font files like WOFF2 and only load the styles you truly need.​
Jetpack 