How to Change the Font Family on Your WordPress Blog

Share on Facebook0Tweet about this on Twitter0Share on Google+0

This is a basic, entry level post for newcomers to WordPress who want to know how to change the fonts on their blog.

I have been using free wordpress themes for a while now – they represented the best way for me to get a blog template for zero cost, and allowed me to start experimenting with generating content online and playing around with affiliate sites.

I’ve tried a lot of themes out and whilst each one has its benefits, each one also has its drawbacks. For example, I’ve found adsense ready themes that save me a ton of time when setting up new niche blogs, but at the same time I’ve needed to dive into the templates and the CSS to make changes to things like fonts, width, banner placements etc…etc…

One thing that is pretty easy to change is the Font Family used on your WordPress Blog. Some free themes come with fonts that may not be to your taste. This post shows you how to change them at the most basic level in the CSS.

Firstly, why are font families used?:

Browsers use default fonts, and if you code up a blog or a website that specifies a single font, then there is a chance that this could cause issues for any vistors that you may get who lack that font. However, these days this is pretty rare if you are using the most common fonts.

The concept of using ‘font families’ removes this issue by grouping various fonts, and if a user that arrives at your website or blog does not have the first font in the family, then it will simply use the next one in the family group, and so on…..

Basically the premise here is that not every computer is equal when it comes to fonts, and if the reader of your blog does not have, lets say Verdana, then it will use the next font in the font family.  Cascading style sheets solve the problem of having only one font by allowing groups of fonts (or ‘families’) to be specified.

There are essential 5 families which tell a user’s browser the chosen style of typeface to display if none of those specified are available. These families are:

  • serif
  • sans-serif
  • cursive
  • fantasy
  • monospace

How do I change my font then?:

Go to your WordPress template editor (usually: Dashboard > Appearance > Editor) and open your Stylesheet (style.css). Find the code that looks like:

  • body {
    margin: 0;
    padding: 0;
    background: #E8E8CE url(images/background1.jpg) repeat;
    font-size: 78%;
    font-family: “Lucida Grande”, “Lucida Sans Unicode”, Verdana, Arial, sans-serif;
    color: #333;
    text-align: center;;

Note that there is a line that specifies the ‘font-family’. In order to change the fonts, simply amend the font family. Here is an example below of a niche blog that I set up where I wanted to change the fonts. I amended the code above to include a different family of fonts (see the bold type below to see what i changed)

  • body {
    margin: 0;
    padding: 0;
    background: #E8E8CE url(images/background1.jpg) repeat;
    font-size: 78%;
    font-family: ‘Lucida Grande’, Verdana, Arial, Sans-Serif;
    color: #333;
    text-align: center;;

Easy. Try out the following font families in your blog to see what style suits you best:

  • font-family:Verdana,Geneva,sans-serif;
  • font-family:Tahoma,Arial,Helvetica,sans-serif;
  • font-family:Georgia,Utopia,Palatino,’Palatino Linotype’,serif;
  • font-family:’Times New Roman’,Times,serif;
  • font-family:’Courier New’,’Courier’,monospace;

Leave a Comment