I thought I would mention how to work with fonts on your WordPress blog to help you avoid formatting issues. For many of my clients, I will install a plugin called TinyMCE Advanced that adds extra buttons to the visual editor. These buttons include font families, font sizes, tables, etc. It makes it a little easier for clients to work with the post editor because TinyMCE Advanced gives it more of a Microsoft Word feel. However, it can cause problems as well.
Some of my clients like to get very colorful with their posts and tend to change the font styles and colors that are already coded into the theme. This leaves sort of a mess, code wise, and is something you want to be careful about.
Fonts are coded into the WordPress theme as defaults and if your theme has been customized to match your preferences, you should have the body text and header fonts you like to keep your blog posts consistent and professional looking. If your blog is coded for the body text to show Arial, and you are constantly changing it to Trebuchet MS, for example, the post is going to start looking a little weird.
If you actually go in and look at the code using the the text editor tab, after you’ve changed the font style or color, you’ll see that extra code has been added to create the new font. If you want to do something like move a line up so it doesn’t have a space, the code gets in the way and you have to strip it out first to get the line to cooperate. That’s why it’s better to stick with your theme’s default fonts rather than mess with it every time you write a post. The same goes with adding additional colors. If you want something to stand out and be highlighted, that’s fine, but don’t go hog wild with it. The result will look amateurish and tacky.
It would be better to either stick with the default fonts or have your web person change the font styles or colors throughout the site using the CSS stylesheet instead.
In the end, you want your font style to not only look consistent but also be readable. In general, it’s always better to have a white background with a dark text font in a size that’s easy for people to view. A small font size will make people squint, especially if they’re older. The same goes with using a dark background with a light font. Not everyone will be able to view it well. Having a white background is also easier for adding images to the post. If you have a colored background and you want to add certain types of images, you may need to make sure the image has a transparent background or it will look like it’s sitting in a white box. This is especially true for icons or symbols. It takes extra work and formatting to make it look right on the page if it doesn’t have a white background.
Certain font styles are easier to view than others and not all can be seen on each of the different browsers in the same way. You want to make sure to use web safe fonts such as Arial, Verdana, Helvetica, Trebuchet MS, Tacoma, Georgia, Times New Roman, Paladino, Lucida, etc. Now that Google is making it easier to add Google Fonts to WordPress themes, people are adding all sorts of unusual fonts, but remember, it’s all about the reader. If a person can’t decipher a fancy looking font, it isn’t going to do you much good no matter how cute it looks. If you are looking for professionalism, stick with readable fonts and avoid the less sophisticated ones like Comic Sans, Bradley Hand, Papyrus, Curlz, Kristen, etc.
The best solution is to first use a well coded theme such as StudioPress, WooThemes, Thesis, etc., that has attractive fonts to begin with, and then have your font colors and styles set from the very beginning. Only use your TinyMCE Advanced toolbar buttons if absolutely necessary. I like to use it to easily create and format tables, if needed, but other than that I stick to the default fonts and sizes. Use the W button on the editor if transferring text from Microsoft Word or online to clean up the code, or just enter it into the text portion of the editor to strip out bad code or links.
The cleaner your code, the less problems you’ll have with your blog.
Have you had issues with formatting your blog posts? Feel free to comment.