Google Chrome plugins and extensions for designers
October 13, 2023
Let’s take a look at the best photographer websites
October 14, 2023Typefaces, also known as font styles,enable you to add a personal touch to how your messages are transmitted. Even though it might not seem so important at first, typography is an essential aspect of web design, strongly influencing the perception of users. Choosing and changing fonts is not that easy, and it might raise some problems for website owners. However, if you want to learn how to change fonts in WordPress and how to make a good selection of typefaces, this guide will answer most of your questions.
Why is your font choice relevant?
Many people believe that typefaces don’t make much of a difference when it comes to delivering a message. As long as it is readable, why should you bother with changing fonts? In fact, fonts carry much greater meaning than you would believe. Each font comes with a certain level of readability and its own unique connotations, so you must make sure your chosen font has features that make it appropriate for the theme of your website or the message you want to convey.
Fonts can also help you to guide visitors to read the content in a certain order. The viewer’s eyes always follow a path that the website’s layout dictates, based on visual elements. Arranging the text in a certain way and using specific fonts can change the way a visitor perceives the entire composition.In short, fonts represent a significant aspect of a website’s design, making the difference between a trustworthy one and a less professional one. This is why you should focus on learning how to change fonts in WordPress.
What types of WordPress fonts can you use?
Fonts come in five main types, and WordPress fonts are no exception. The typefaces you can choose from are:
- Sans Geometric. Geometric fonts don’t feature a lot of elements. They are minimalistic and mostly made of geometric shapes. The strokes always have the same width. Two of the most popular examples of Sans Geometric fonts are Helvetica and Gotham.
- Sans Humanist. These fonts are just as simple and structured as Sans Geometric ones. Even so, they have curlier details that resemble handwriting. Compared to geometric fonts, the strokes in humanist fonts vary in width. Common examples of humanist fonts include Verdana or Myriad.
- Old Style. If you are familiar with those typefaces that were common in medieval times, you already know how old style fonts look like. They have consistent kerning and zero variation between lines. A good example would be Garamond.
- Transitional.Step away from old style fonts and focus on transitional ones. Also known as modern fonts, transitional fonts were born soon after people got tired of old style fonts. These are sharper, more geometrical and their most differentiating feature is that both thick and thin strokes are used. Times New Roman or Baskerville are transitional fonts.
- Serif Slab. Slab fonts are a combination of all the types mentioned here. They are based on different strokes, but they are quite bulky in structure. Archer is a great example of this category.
How can you change them?
Now that you know some things about different font types, it’s time to learn how to change fonts in WordPress. Most fonts on a WordPress site are the ones that your theme provider set beforehand. Luckily, each theme that is compatible with the latest WordPress versions has a feature called the Customizer. By using this option, you can customize certain settings of the theme, including fonts.
Here, you can decide how parts of your content are presented. The Customizer allows you to set the size of the text for paragraphs, titles (H1), subtitles (H2), and so on. In some situations, simply changing the dimension of the text will do the job. In other cases, changing the typeface is the only way to make the text stand out.
The editor will help you with changing structural details for all themes, but only certain WordPress themes offer highly customizable font options that let you change the font type anywhere on your site. If you aren't using such a theme, there are options other than the Customizer for changing your fonts, which we'll cover below.
Using a plugin for WordPress fonts
If you’re not that good with technology and you don’t want to dive into the world of coding just to change fonts in WordPress, you will definitely want to use a plugin. There are plenty of WordPress fonts plugins that will do the job for you. You can adjust the settings and change font styles entirely, with just a few clicks. Take a look at this list and choose the WordPress font plugin that works best for your needs.
Easy Google Fonts
This is one of the simplest WordPress fonts plugins you can use. All the fonts included in this plugin are free. You can choose between more than 650 fonts, very diverse in style. You can change the typeface and alter settings such as the dimension of the paragraph and heading text. You can change the color attribute as well.
WordPress Font Plugin
This WordPress Font Plugin will make your job easier. After installing it to your WordPress site, you can rest assured that your font settings stick around even when you are changing the theme. You can change both the style of the font and make adjustments regarding size or color. By using WordPress Font Plugin, you can change fonts for all aspects of your site, not only for content.
Use Any Font
Use Any Font is a simple WordPress fonts plugin that enables you to use custom fonts besides the ones that are already included in it. You can upload a font of your choice and the plugin turns it into a web-friendly typeface.
WP Google Fonts
If you're in love with Google's free collection of fonts, WP Google Fonts is the plugin for you. It directly changes the code without needing your intervention, and you can also assign fonts to specific elements of the site, instead of applying the changes to all the content present on it.
TinyMCE advanced
MW Font Changer is a good choice if you need to use fonts for Persian Arabic or Latin languages. The plugin offers character-friendly fonts for over 30 languages.
Using CSS code
If you are experienced with coding, you can use CSS instead of a plugin. Remember to save a copy of the theme’s files before starting to make changes so that you are able to revert to a previous version if anything goes wrong.
Here’s how to change fonts in WordPress by using CSS code:
- Navigate to the style.css file in your WordPress Editor or the CSS section of your theme Customizer
- Use the following code with the recommended font dimensions based on what you are planning to change:
For the whole text:
body {<br />font-size: 1.25rem;<br />}
For paragraphs:
p {<br />font-size: 20px;<br />}
For headings:
h2, h3, h4 {<br />font-size: 1.5em;<br />}<br />
For sidebar elements:
.sidebar li {<br />font-size: 16px;<br />}<br />
For footer elements:
.footer {<br />font-size: 110%;<br />}<br />
You can change the fonts:
For the entire website
If you want to change the font globally for all content published on your website, you will have to navigate to the ThemeEditor under Appearance and then locate the theme’s style sheet. The CSS style sheet needs to be edited by adding this line of code at the top:
* {font-family:”Name of font”;}
For specific bits of the text
To edit just parts of the text published on your website or specific areas of your theme, you will have to find a specific tag, class, or div of your site. Each theme is different, so these CSS category names will be different for every user. Generally, after finding the category element, you will add some lines of code similar to:
body {font-family: Verdana, Arial, Helvetica, Futura, sans-serif;<br />font-size: 1em;<br />padding:0;<br />margin:0; }
The most common CSS categories are post, entry, and post-entry.
FAQ on changing fonts in WordPress
How do I change the default font in WordPress?
Oh, I get this one a lot! So, to change the default font, you'd typically head over to the Appearance section in your WordPress dashboard. Then, click on Customize. There's usually a section called 'Typography' or 'Fonts'. Dive into that, and you should see options to change the default font. Remember, some themes might have more font options than others. Always good to explore!
Can I upload my own font to WordPress?
Absolutely! If you've got a unique font you're itching to use, WordPress has got your back. You can use plugins like Use Any Font or Font Organizer. Once installed, these plugins allow you to upload your custom font files. After uploading, you can assign them to different elements on your site. Pretty cool, right?
Why isn't my chosen font displaying correctly?
Ah, the age-old mystery! Sometimes, even after you've set a font, it doesn't show up right. This could be due to browser compatibility issues, or maybe there's some pesky CSS overriding your settings. Check if the font is web-safe or if you've properly enqueued it. And, if you're using a cache plugin, try clearing the cache. That often does the trick!
How can I change the font size in WordPress?
Size matters, especially with fonts! In the Block Editor, there's a setting on the right-hand side for font size when you're editing a paragraph or heading. If you're looking for more global changes, you might need to dive into the Customizer or even tweak some CSS. Remember, consistency is key, so don't go too wild!
Are there any recommended plugins for font management?
Oh, for sure! There are some stellar plugins out there. Easy Google Fonts is a popular one, letting you tap into Google's vast font library. Typekit Fonts for WordPress is another gem if you're into Adobe fonts. Plugins can make the font game a breeze, so definitely worth checking out.
How do I ensure my font choice is mobile-responsive?
Great question! With so many folks browsing on mobile, you gotta make sure your fonts look snazzy there too. When you're in the Customizer, there's usually an option to see a mobile preview. Check how your fonts look there. Also, some themes and plugins offer responsive font size settings. Keep an eye out for those!
Can I use different fonts for different sections?
You betcha! With WordPress, you can get as creative as you want. In the Block Editor, you can assign different fonts to different blocks. If you're looking to set different fonts for, say, headers and body text, the Customizer is your best friend. Dive into the typography settings, and let your creativity flow!
What's the deal with web-safe fonts?
Ah, the good ol' web-safe fonts! These are fonts that are, well, safe to use across different browsers and devices. They're like the trusty old jeans of the font world. If you stick to these, you're less likely to run into display issues. Arial, Times New Roman, and Georgia are some classics in this category.
How can I optimize font performance?
Speed is the name of the game! If you're using web fonts, they can sometimes slow down your site. Consider hosting them locally or using a plugin that optimizes font delivery. Also, don't go overboard with too many font weights or styles. Keep it lean and mean!
Any tips for pairing fonts in WordPress?
Oh, font pairing, the art and science! A general rule of thumb: use contrasting fonts. Maybe a bold header font with a more subdued body font. Google Fonts has some suggested pairings, which can be a great starting point. And trust your gut! If it looks good and is readable, you're on the right track.
Conclusion
Once you’ve learned how to change fonts in WordPress, it’s important to figure out which fonts work best with your site and which have the biggest impact on the users. Don’t underestimate the power of a good font. Typefaces can stir different emotions based on what message is conveyed. Picking a font from a family of typefaces that are known for the audience that consumes it can dramatically change how your website is perceived. Do your research and see which website does its job the best.
Beginners should use WordPress fonts plugins, while experienced users can play with different CSS styles to achieve the personalized result they have in mind. Either way, focus on aspects that make a difference in how the typefaces look on the website – kerning, readability, spacing, size, colors and so on.
If you enjoyed reading this article on how to change fonts in WordPress, you should check out this one about how to make fewer http requests.
We also wrote about a few related subjects like how to reset WordPress, how to remove proudly powered by WordPress, how to use the WordPress do_shortcode, WordPress favicon, how to duplicate a page in WordPress and how to get a WordPress mega menu.
