Table of Contents
Do you want to customize the fonts of your WordPress website?
Maybe you want a greater variety of font choices like that provided by an external font library such as Google Fonts.
Or your inner vision is sparked and you went above and beyond by designing a custom, from-scratch font.
Whatever the case may be, adding fonts to WordPress without a plugin is easy.
Whether you have coding experience or not, this post will guide you in doing two things:
- Show you how to import fonts from Google Fonts
- Show you how to embed custom fonts from a file (like TTF or WOFF2 font formats)
What’s the difference between the two different methods of embedding external fonts?
The first method allows you to import fonts hosted on Google’s servers. These fonts are typically equipped with variable font formats for cross-browser compatibility.
Externally hosted fonts like Google Fonts don’t require you to host different font format files in your server which is exactly what the second method needs you to do.
For the second method, we’ll be (1) uploading the files on our server and then (2) serving them on our site.
One thing to keep in mind is that not all browsers support all font formats!
There are differences among font formats that make certain ones more compatible across browsers than others.
For instance, TrueType (TTF) and OpenType (OTF) formats are supported by far more browsers than Web Open Font (WOFF/WOFF2) and Scalable Vector Graphics (SVG) formats.
Why bother using custom fonts on websites?
It seems custom fonts are a nuisance what with all those font formats that aren’t supported across all browsers 😵💫
So why even bother trying to include custom fonts when the browser might end up defaulting to the system font regardless?
Custom fonts can be important on websites for a few reasons:
- Branding: Custom fonts help capture your brand identity and add to your uniqueness.
- Accessibility: Not all fonts are easily readable by different users (such as the case of serif or cursive fonts).
- Design: With custom fonts, you can create a specific design aesthetic that best conveys a desired tone or mood through the overall look and feel of a website.
- Reusability: A website’s font style is usually carried out onto logos and other resources as part of cohesive design.
Note: Fonts can negatively affect the performance of a website by increasing loading times. Be prudent in your use of them!
You might want to think about how to improve site performance when loading custom fonts.
This includes deciding on what screen sizes to serve custom fonts (i.e. mobile devices tend to default to system fonts) and how many type properties are necessary (e.g. different font-weight scales).
How to use Google Fonts in WordPress
Let’s begin with an easy Google Fonts WordPress tutorial.
Note ‼️
Many WordPress themes come equipped with Google Fonts! Check if your theme already provides access to the Google Fonts library to avoid loading duplicate scripts.
To import Google fonts to a WordPress website, follow the next steps.
1) Grab necessary styles from Google Fonts
Go to the Google Fonts website and choose the font you want to use by clicking on it. For our example, we went with “Lora”.
On the next screen, you will see information about the font like its license and an option to download the family.
You will also get the chance to preview the font with whatever text you’d like to test in the different font weights that are available.
Tip: Don’t download the font family. If you do, you’ll need to upload the downloaded font files on your own server which defeats the “ease” of Google Fonts.
We’d like to leave the files on Google’s server and load only the font weights we’ll be using. Why? To avoid bogging down the loading speed of our website!
Select the font weights you want to include in your font import. You can add more than one by clicking on the plus sign.
Each selected font-weight will appear on the “Selected family” sidebar where you can manage your selected font families and respective family styles.
Copy the provided code from the sidebar.
To link via the HTML file, copy either the <link> code portion or the <style> portion and place it inside the <head> section.
To link in the CSS file directly, copy the @import code portion without the provided <style> tags.
2) Add Google Fonts to WordPress site
In your WordPress dashboard, go to Appearance > Customize.
Click on the “Header/Footer scripts” (if linking <link> or <style> code) or “Additional CSS” (if linking directly @import) in the Customizer menu.
Tip 👀
We find the Customizer options vary across different WordPress instances and themes.
For Header/Footer scripts you might want to check under a “General” option if you don’t see yours listed. For Additional CSS you might want to consider a reliable plugin like “Custom CSS” if there’s no option present.
Paste the code you copied from the Google Fonts website into the appropriate box.
Click the “Publish” button to save your changes. You’ll not see a difference because all we did was connect the external Google Fonts stylesheet with our site.
To use the font in your WordPress site, you need to apply it to specific elements using CSS. This will look something like this: p { font-family: 'Lora', serif; }.
And, even better, make sure to add one (or more) fallback fonts that usually are basic system fonts such as Arial or Helvetica like so: font-family: 'Lora', Arial, serif;.
That’s it! Your Google font should now be imported and applied to your WordPress site.
Note: The steps above apply to the current version (January 2023) of the Google Fonts interface. If their UI undergoes any updates, things might not appear as outlined.
Side Note: Don’t Change Theme Files 🙅♀️
From the WordPress dashboard navigate to Appearance > Theme File Editor where you can view the files of your theme.
You can technically embed the Google Fonts external stylesheet in the header HTML file of your theme or its respective stylesheet.
But because you are able to doesn’t mean you should.
If you add custom code to your theme files you risk having to redo all customizations once your theme rolls out an update!
Any theme updates will overwrite existing theme files and replace custom code additions.
…Unless You Use a Child Theme 💡
This is why any changes in theme files are usually included by way of a proxy clone called a child theme.
Think of a child theme as a clone of your existing theme that acts as an intermediary layer between any custom code additions and the existing theme files.
A child theme builds on top of the original theme files so that when the theme files are updated by their developer, your custom code isn’t wiped out.
Instead, the theme files change as they must underneath your custom code which exists on top of the original theme layer.
Since building a child theme is beyond the scope of this post and not that easy of a task for anyone unfamiliar with code, we don’t recommend affecting theme files as a viable option for adding custom fonts to your site.
How to add custom fonts to a WordPress site
Next, we’ll be adding the custom Laguna Beach font by Graph Arts (which I downloaded for free) in WordPress.
There are three main steps that I’ll go over in detail but briefly put:
- Get the custom font file(s) (having more than one font format file is good as that means more fallbacks for browser compatibility)
- Upload the custom font file(s) on a server
- Download the file(s) in our stylesheet using
@font-face
1) Importing a custom font to a WordPress website
To upload your custom font file(s) to the server, go to your theme files either through an FTP client or directly through your host’s cPanel File Manager.
THT is hosted by Bluehost so navigating to our cPanel looks like this:
When in the file manager, go to the theme files directory where you have the option of how to organize your font files.
Tip: I’d recommend you create a “Fonts” folder to place all your custom font files (taking into consideration future font choices). If importing more than one font family, create sub-directories for each family. Organization saves hair follicles 😇
Keep in mind, your theme might already contain a “fonts” directory so all you’ll need to do is to upload your file(s).
Pro Tip: If your custom font contains multiple file formats or font styles, create a nested sub-directory for your custom font family!
Note 📝
It’s best to use a child theme since updates to the theme files will overwrite any code you add. However, for this example, we’ll keep it simple and add the custom font directly onto the original theme files.
2) Applying a custom font in WordPress
With the custom font now on a server, the next step is to download it in our stylesheet or link in the HTML head section.
This is how it’ll look directly on the stylesheet:
@font-face {
font-family: "Laguna Beach";
src: url('<https://mydomain.com/wp-content/themes/mythemes/fonts/LagunaBeach.ttf>');
}
h1 {
font-family: "Laguna Beach", Arial, sans-serif;
}Note: The
@font-facerule must come at the very top of your stylesheet before any of the declared styles.
Or how it’ll look in the <head> section of the HTML file:
<style>
@font-face {
font-family: "Laguna Beach";
src: url('<https://mydomain.com/wp-content/themes/mytheme/fonts/LagunaBeach.ttf>');
}
h1 {
font-family: "Laguna Beach", Arial, sans-serif;
}
</style>Remember to replace the font-family name and src with your personal ones!
In either case, the result is the same as you’re basically downloading the custom font using @font-face and applying it to your elements.
If your custom fonts come in different font formats (i.e. you have multiple different files), check out how to take advantage of them for deeper browser support.
And don’t forget that browser compatibility is super important when selecting fonts!
Your custom (dare I say expensive) font will default to a basic system one if it’s not supported.
I hope this helps! Let me know if you have any questions.
See ya ✌️
More on WordPress: Comments Form Not Showing In WordPress? Try This Easy Solution