Change the font on any WordPress site you own

My friend Mike Mueller loves Comic Sans. Well, something like that. He used to mention it a lot. Then again, there are many other choices that people really like or their graphic designer has come up with them to use. Some themes do allow for changing the font on the site, but most do not. What to do? First, don’t panic. Next, follow these steps:

  1. Pick a websafe font you like or that matches your site design
  2. Get the pertinent part of the font name like “Comic Sans MS”, cursive, sans-serif
  3. Log in to your admin panel on your WordPress website
  4. Go to Appearance
  5. Click on Editor
  6. It should open to style.css – if not, find it in the list and click it
  7. So here’s where the fun part may come in:
    1. Perhaps the easiest way is just to change the body font so look for a line (probably near the top) that begins with body{ and inside of that find a line that begins with font-family:
    2. If you see that line in body{ font-family: “Font Name”, style, type and replace whatever the last part says with your new font. In our example it’s “Comic Sans MS”, cursive, sans-serif
    3. Some themes may have multiple font-family: styles so you may have to replace it in different location
  8. Save the file and visit your site – if you don’t see the changes you may need to flush your cache or just keep digging in the style.css file

Another method is to use inline CSS. Don’t use this unless you just need to change a few words. Like I did just there.

<span style="font-family: 'Comic Sans MS', cursive, sans-serif;">Don't use this unless you just need to change a few words.</span>

That’s what the HTML looks like to get that “span” to use a different font. You can use any websafe font that is available either through a remote link or on the user’s computer. But wait, what is a linked font?

Linked web fonts allows the website to make use of fonts from a greater repository and to present them on the pages in the site without the user needing to download and install anything. Here is an example of a linked font:

<link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>

This link will allow the visitor to see your site using fonts from the “Open Sans” family of fonts through linking. For WordPress this would require either placing that link in the header.php file above the line that says <body> or adding an include to the style.css file. We do this by knowing where the font is stored (so that it is available online) and using the @font-face element:

@font-face {
font-family: 'CoolFont';
src: url('coolfont.woff2') format('woff2'),
url('coolfont.woff') format('woff');
}

You will notice that I used the font type .woff and that’s the future of today. Currently most browsers support the .woff and .woff2 font classification. Meanwhile, for older browsers, you may still need to include .ttf or other font classifications.

To find cool web fonts to use, simple Google “web fonts” and you’ll find several. Once there you’ll know now how to include them in your design. If not, just let me know by asking below and I or someone will be happy to answer.