Overview: Comic Sans, 0 coding, and simple methods to install and change WordPress fonts for a refreshed website
Most fonts are designed to make communication easier, so it’s probably time to change your website font if you find that it’s making your message difficult to read… literally.
Fonts play a huge role in how people take in information. Everything online includes some form of text and therefore relies on text. This means that the font you choose could either create an enjoyable online experience, or a nightmare.
HOW THIS "UGLY" FONT HAS RUINED DIGITAL MARKETING:
Let’s think about the most infamous font that exists (arguably)… with its handwritten, playful, and quirky look.
Yes, we’re talking about Comic Sans.
The font is so hated that it’s even been described as someone throwing up on their keyboard. While that’s not nice… it isn’t necessarily wrong. (Sorry, Comic Sans fans.)
Ironically, the positive characteristics that make up the font are the same ones that give it the top spot on most people’s list of the most loathed fonts – especially graphic designers.
But whether it was inspired by the “comic book lettering of Watchmen and Dark Knight Returns” or “originally intended to represent the speech of an animated dog,” we all agree that Comic Sans isn’t the go-to when opting for a polished, professional digital appearance.
If, for some very odd reason, you still have Comic Sans as your website’s primary typeface (or some other font you simply don’t like) here are 3 easy methods to get hundreds of fonts installed on your WordPress site.
METHOD 1 (NO CODING) FONT INSTALLATION ON WORDPRESS USING GOOGLE FONTS:
Installing fonts to your blog is not only easy but doesn’t require a lick of coding! Yes, you read that right. No coding! – The Sits Girls
Go to WordPress dashboard
Click on Installed Plugins tab
Click ‘Add New’
In the searchbar that appears, search ‘Google fonts’. A list of fonts will appear
Scroll until you get to ‘Google Font Manager’
Click ‘Install Now’. You’ll be prompted to activate the plugin
Active the plugin
Once activated, the plugin is ready for use. Just click on ‘Settings’ tab and find and open ‘Google Font Manager’ plugin
Once opened, Google Font Manager will prompt you for an API Key
Click on ‘Settings & Options’ icon in the top right corner
Click to get your developer key (all you need is a Gmail address)
Once you have that, copy + paste the API key into the designated area
Click ‘Update Configuration’
Once API Key is setup, you can view all fonts under the ‘Preview Fonts’ tab in Google Font Manager
You can add a font to your website simply by clicking ‘Add This Font’ on the bottom right corner
To use your selected font in a blog post, simply click ‘Posts’ > ‘Add New’ from the dashboard. You’ll see the new fonts under the ‘Font Family’ drop down menu. You can use different fonts throughout your post.
If you prefer to watch a step-by-step process of how to upload fonts to your WordPress site, click here to watch the video tutorial.
METHOD 2 (7-STEP MANUAL) FONT INSTALLATION TO WORDPRESS:
If you don’t want to overburden your WordPress with plugins, you can add fonts to your website manually. You have to upload your font to your hosting account and edit your theme’s CSS file.
Download the font that you want to use to your computer
Extract the .zip archive is necessary
Upload font file to wp-content/themes/your-theme/fonts directory.
Create a separate fonts folder if you don’t have one yet. You can use an FTP client like FileZilla or Hostinger’s File Manager for this task.
Head to the WordPress admin area
Go to Appearance > Theme Editor. You’ll be presented with the style.css file. Scroll down and add the following code (don’t forget to change font-family and URL values to match your font):
@font-face {
font-family: Aguafina Script-Regular;
src: url(http://test-site.com/wp-content/themes/twentynineteen/fonts/AguafinaScript-Regular.ttf);
font-weight: normal;
}
Press the Update File button to save your changes
To assign the font for a specific element, edit the same style.css file
There’s a full tutorial here, including a list of where to download fonts for WordPress and how to convert fonts to a web-friendly format.
METHOD 3 (BEGINNER-FRIENDLY/DUMMY-PROOF) FONT CHANGING USING WORDPRESS CUSTOMIZER:
Many themes have options to change the font by going to My Site → Appearance → Customize.
This method is as easy as it gets because it’s as easy as changing in Microsoft Word. There are no plugins or style.css files – this is just good ole’ WordPress customization at its finest.
If there are no font options in your Customize tab, check to see if your theme supports the Global Styles method of changing fonts.
From My Site(s) go to Appearance → Customize
Click on the Fonts option in the Customizer
Click the drop down under Headings or Base Font to see what font options are available
Once you are satisfied with your font selections, Publish your site, or Save Draft if you want to continue to customize your site before publishing it.
Once you’ve selected your custom fonts, you can change them as many times as you want.
Each time you change a font, the live preview refreshes so you can see how that font will look on your blog.
Remember that fonts are set in pairs – one for the headings and the other for the base fonts.
Headings:
Choose a font to use for all of the headings on your blog. Common examples of heading text include post and page titles, widget titles, comment headers, and headlines inside posts and pages.
To adjust the style of your heading fonts, click the option below and to the left of the font. The available styles will vary depending on the font you have chosen.
Base Font:
Choose a font to use for the main body text and for the menus on your blog.
To adjust the size of either your heading or your base fonts, click the size option below and to the right for each selected font and select a size from the dropdown menu.
Read more about custom fonts on WordPress’s support site here.