Ask Blog Design Guy #2: Adding Custom Colors and Fonts to Your Blog Posts

Is there a way to add colors and different fonts into your posts with regular free WP themes?

- Susie, NewDayNewLesson.com

Not only is it possible to add colors and custom fonts to your posts with a free WordPress theme, it’s also super simple. Today I’ll show you how you can spice up your posts with a bit of color and some non-standard fonts!

Custom Colors in Your Blog Posts

Adding different colors to post text is a feature that’s actually built into the WordPress post editor. You might not have seen it before because it’s hidden in the “Kitchen Sink.” (Geek humor, get it?)

When you first set up a WordPress blog, the toolbar of the post editor will look like this, and you’ll see this strange little button at the end:

Go ahead and click it. When you do, it reveals a second row of formatting buttons, including font colors:

All you have to do to change the color of your text is to, in the editor, highlight the part you want to change and then click the arrow on the font color button and choose the new color. Simple as that!

Keep in mind that any color you choose needs to complement your blog brand and your designs colors. With great power comes great responsibility!

Custom Fonts in Your Blog Post

Using a custom font can take a bland design and turn it into something special immediately. It can also wreck your design if you don’t know what you’re doing! Using custom fonts in your posts is a little more difficult than change the color of the text, but not much (especially when you consider the plugins that are available.)

However, you need to put a lot of thought into using custom fonts. You can’t just use something because it looks “cool” or “fun.” It has to match who you are and what you’re writing. Recently I visited a doctor’s office. On the bulletin board there was a flyer advertising an upcoming dinner for cancer survivors and it was written in Comic Sans. Cancer is serious business and a dinner for survivors is a respectable event, so using the childlike Comic Sans completely clashed with their purpose. That’s the kind of thing you have to watch out for.

So, I offer you these two guidelines for using a custom font:

1. Use no more than two fonts on your blog. Unless you know what you’re doing, using more than one font can turn into a clashing mess. Two fonts can make your blog design interesting, but still very usable.
2. Use a “decorative” font for your titles and headings, use a “plain” font for paragraph text. Headlines are big and short, making them perfect for the more interesting fonts. The paragraph text is long and packed together so it’s better to play it safe.

For Blog Design Guy, my title, lead paragraph and headings are in a non-standard font called Arvo. Arvo is the font that makes the blog’s design stand out from other site’s. While not a particularly decorative font, it offers lots of polish to the design.

All the paragraph text is in Arial/Helvetica because Arial and Helvetica are super easy to read. They are clean and simple.

How to Use Custom Fonts

If you learn CSS, you can do quite a bit with custom fonts. However, thanks to Google we can use a simple plugin. In the Dashboard, go to Plugins > Add New and search for WP Google Fonts. When you find it, click Install Now and then activate it.

WP Google Fonts will let you use one of the many fonts in the Google repository on your blog (you can see a list here). Go to Settings > Google Fonts and then choose a font you want to use from the drop down menu. You can play around with adding them to any post element you want, but I would stick with Headline 1 and Headline 2 (and the other headlines if you make use of them.)

After you do that, click the save button. In my case, my post went from looking like this:

To this:

And it’s easy as that!

Be sure to subscribe to Blog Design Guy if you haven’t already, and if you have a question about your blog design or any other aspect of running a blog, you can get help by contacting me through the Free Help page or by using the form below!

Oops! We could not locate your form.

Similar Posts:

None Found