Get $500+ of the best After Effects files, video templates and music for only $20!
Changing the Fonts of Your WordPress Site – Part 1: Using a Plugin
basix

Changing the Fonts of Your WordPress Site – Part 1: Using a Plugin

Fouad Matin on Oct 25th 2011 with 15 comments
Tutorial Details
  • Program: WordPress
  • Difficulty: Beginner
  • Estimated Completion Time: 10 minutes

WordPress continually proves itself time time and again that it has very few limitations, and is rapidly pushing itself to being, if not the best, but certainly the most versatile CMS available. Out of the box it is certainly not perfect, but you can change it however you want. In this tutorial, we will go over how to change the fonts of your theme using a plugin. You can use either Google Web Fonts our your own custom fonts.

This is part one of a two part tutorial showing you how to change the fonts of your WordPress site. We will be using a plugin to add the functionality to change the fonts of specific html tags, or even use custom CSS. This tutorial is oriented to the beginners to WordPress. Part 2 will cover adding font functionality to your theme, without a plugin.

We will be utilizing the WP Google Fonts plugin to change our fonts by Adrian Hanft. This plugin makes it even easier to add and customize Google fonts on your site through WordPress. Additionally, you can even use this plugin to custom CSS to your site.

The Video Tutorial

Part 1: Using a Plugin

In this video we will go over how to change the fonts of your theme using a plugin.

 
Enjoyed this Post?

Subscribe to our RSS Feed, Follow us on Twitter or simply recommend us to friends and colleagues!

By Fouad Matin

Rollover to read this author's bio or click through to see a full list of posts by this author.

Fouad Matin is a PHP/MySQL/WordPress developer. He is currently playing around with node.js, django and data encryption. Follow him @heyfouad and his website http://fouadmat.in.  

Add Comment

Discussion 15 Comments

  1. samer says:
    October 25, 2011 at 1:48 am

    this is so beautiful

    Reply
  2. Pippin says:
    October 25, 2011 at 2:59 am

    The first part of the tut where you’re showing how to use the Google webfonts is great, but you have to be careful when using @font-face. It’s fantastic but you have to use four different font formats if you want the fonts to be cross browser compatible. If you want to target all desktop browsers, you need a minimum of two formats. If you want to target mobile devices as well, then you have to use four different formats.

    Reply
    • Fouad says:
      October 25, 2011 at 3:30 am
      Author

      Hey Pippin,

      Thanks for the input. Users can include whichever formats they want, I was only showing how to put anything at all. That is a great point about mobile devices, but this is only a basic tutorial. In the next tutorial, I will be going over all the font formats and how to include them directly into your theme.

      Thanks!
      Fouad

      Reply
  3. dj says:
    October 25, 2011 at 3:27 pm

    Your first tut? Probably. A couple of suggestions if you won’t be offended – write an outline or practice it once before hitting record. Also get control of that mouse – it continually flails all over the screen without giving us time to see what or where it’s going. Additionally – you can’t just click from one selection to another without describing what you are doing in your voice-over and expect the viewer to understand what you are doing. If we could do that – we wouldn’t be watching your tutorial. And lastly – I think that perhaps setting your font size to “two pixels” might be counted by Google’s SEO spider as “cloaking.”

    I hope these suggestions catch you in time for your next tutorial – for I am looking forward to viewing it.

    Reply
  4. fiona Collins says:
    October 26, 2011 at 4:50 am

    Thanks for the plugin advice. This will be of great help.

    Reply
  5. Frei says:
    October 29, 2011 at 6:29 pm

    Didn’t anybody see that typo?

    You can use either Google Web Fonts “or” your own custom fonts.

    Reply
  6. Swamykant says:
    November 11, 2011 at 2:40 pm

    This is a cool plugin. Thanks for the details.

    Reply
  7. Afrim says:
    November 24, 2011 at 8:28 pm

    Thanks for the tutorial but I am using Polished theme for worpdress and installed this plugin… I tried changing fonts but there isn;t any change.

    Reply
  8. bencn says:
    November 25, 2011 at 1:53 am

    if google.com was blocked here,means the site can not use google webfonts?

    Reply
  9. Antonio says:
    March 26, 2012 at 9:13 am

    I prefer to make all the changes to my WP theme by using one editor only- in that way I save a lot of time and effort looking for the right resources. I use Lubith for example, and its typography extension is more than flexible. It has over 400 fonts and some really cool editing options.

    Reply
  10. ARS says:
    March 29, 2012 at 6:30 am

    I’m preferred to not using plugin or google webfonts. any idea how to make it happen in my wordpress themes? thanks before.

    Reply
  11. Tracy says:
    March 31, 2012 at 3:05 pm

    This was EXTREMELY helpful to me–thanks!

    Reply
  12. Sophia says:
    April 28, 2012 at 8:28 pm

    DUDE – THANKS – straight to point.

    Reply

Add a Comment

To add a code snippet to your comment, please wrap your code like so: <pre name="code" class="html">YOUR CODE</pre>. You can replace the class name with "js," "css," "sql," or "php." If there are any "<" or ">" within your code, please search and replace them with: &lt; and &gt; respectively.