One question many people have when creating a website is how to change the font they’re using on their site. As is the case for any printed document, a font can be a great way to add a personal touch and set yourself apart from others. However, WordPress doesn’t offer an easy built-in solution for changing your font, so here several different methods to try to help you get the font you want on your website.
Use your theme
The first crucial element to selecting a font is understanding the role a theme plays. As we’ve discussed before, a theme allows you to make major changes to your site’s look without any code. One of the elements that changes with a theme change is the selection of default fonts offered. Some themes are designed specifically with a specific selection of fonts in mind. Other themes have several options and allow you to choose, and some of these even allow you to upload your own. The latter makes changes simple, but the former can be difficult. (For help on choosing a theme, see our other articles, 4 tips for choosing a theme and How to change a theme.)
If your theme allows you to upload your own options or gives you a good choice of fonts, you can ideally select one of those and you’re good to go. But what if your theme doesn’t give you a choice?
Font plugins
To make changing a font simpler, several plugins exist to give your website extended font capabilities. Easy Google Fonts allows you to use any one of Google’s 850+ fonts on your website. Font Organizer allows you to upload your own fonts to your site. Assuming your font plays nicely with these plugins, install the one that works better for you and you should be in good shape.
What if your theme overrides a plugin?
Some themes make font selection especially difficult. Some themes have font pickers with limited options, and these font pickers override plugins like Easy Google Fonts and Font Organizer. When this happens, font selection is more difficult but not impossible. You’ll need to create a child theme and make changes to the child theme’s style.css file. Essentially, you have to override every CSS class and tag the parent theme uses with the font of your choice. Use the following code, replacing Arial with the font you’ve selected:
body {font-family:"Arial", sans-serif}
Note that the sans-serif part specifies a backup for the browser to use if the primary font you’ve specified isn’t available. If you’d prefer a serif font as a backup, use serif instead. You’ll also need an entry like this for every tag (H1, H2, etc.) and class defined in the parent theme. You’ll also want to use this in tandem with a font plugin above so the font you’ve chosen is available to everyone who visits your site. Otherwise, they won’t see it if they don’t have the font downloaded to their computer.
This can be difficult and tedious, but it’s possible. If you’re having difficulty changing your font, we can help.
