Table of Contents
Using custom fonts will help you expand the list of available fonts and use the ones that match your needs and brand. This functionality can be achieved easily in WordPress with or without a plugin.
Add a custom font into your WordPress site using plugin
Installing plugins to add custom fonts to WordPress is probably the simplest way to accomplish the task. Here are a few of the most popular options: WP Google Fonts, Easy Google Fonts, Use Any Font . You can install then activate a plugin to add a custom font into your site.
An example when using WP Google Fonts plugin to add a font to your site.
But, in this post, I’ll focus on the second method to add a font into your WordPress site without installing any plugins.
Add a custom font into WordPress without plugins
Find the right custom fonts
You can find a great selection of free fonts on Use & Modify or in the The Definitive Guide to Free Fonts from Typewolf. Otherwise, you can take a step further and choose paid alternatives from fonts.com, Adobe Fonts, or Typography.com.
It is worth mentioning that not all web browsers support every custom font. Nevertheless, even if your chosen font is unsupported, you can still convert it to a compatible format.
Before converting fonts from one format to another, let’s have a quick look at different font formats:
- Open Type Fonts (OTF) – the most commonly used web fonts and are a registered trademark of Microsoft. This format works well with almost all major browsers.
- True Type Fonts (TTF) – developed by Microsoft and Apple in 1980. Widely used for both Windows and macOS.
- Web Open Font Format (WOFF) – broadly used format for web pages and recommended by the World Wide Web Consortium (W3C).
- WOFF 2.0 – considered a better option than WOFF 1.0 due to better compression abilities. This format is not supported by Safari and Internet Explorer but works well with Google Chrome, Firefox, or Opera.
- Embedded OpenType Fonts (EOF) – more compact OTF fonts, used as embedded fonts on web pages. All major browsers support EOF.
Make sure that you have all the necessary font formats to display the Web fonts in all major browsers. There should be some Web Open Font Format (.woff or .woff2) files included.
Regardless of the source, each font will come with different font variations (weight and style). Sometimes, you need to convert fonts using Cloudconvert.
For example, I’ve downloaded an .ttf font, so I need convert it to .woff format.
Install the custom fonts into WordPress
If you don’t want to overburden your WordPress with plugins, you can manually add fonts to your website. You must upload your font to your hosting account and edit your theme’s CSS file.
1. Download the font you want to use to your computer then convert it to woff format.
3. Head to the WordPress admin area. Then, go to Appearance | Customize.
4. In the customization page, select Addition CSS option.
5. Insert the below code to set the font-face.
@font-face {
font-family: magica;
src: url(http://bonguides.me/wp-content/fonts/magica.woff);
font-weight: normal;
}
5. To assign the font for a specific element, you need to add more custom CSS codes. For example, the following code would apply the custom font to website’s title.
h3 {
font-family: magica;
}In this example, we’re configuring the H3 to use the new font. However, you can replace that with any other element you want, or multiple elements if you’d like to change the font in more than one place.
The final result, the font was changed for H2.
Change The Font Globally
Stick this line of code on the top of your Stylesheet to use the new font in all areas.
* {font-family:'magica'}Change The Font for Specific Theme Areas
More often than not, you’re going to want to have different fonts for different types of font for different areas on your site. However, identifying font areas can be a pain because WordPress themes use font in a variety of different ways. In reality, fonts can be used anywhere.
For the most part, a certain custom font is found in the body of the WordPress website. This is an overarching web font and will be used to determine the base font for fonts within the site that aren’t defined by a specific tag, class, or div.
Fonts within the post content are generally located in the following CSS classes: content. post, entry, and post-entry.
body {font-family: 'magica', Arial, Helvetica, Futura, sans-serif;}
Your style is so unique compared to other folks I have read stuff from. Barbette Quent Dillon
Glad to hear.