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

on Oct 25th 2011 with 24 comments
Tutorial Details
  • Program: WordPress
  • Difficulty: Beginner
  • Estimated Completion Time: 10 minutes
This entry is part 1 of 2 in the series Changing the Fonts of Your WordPress Site

Changing the Fonts of Your WordPress Site

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.

Other parts in this series:Changing the Fonts of Your WordPress – Part 2: Theme Integration
 
Enjoyed this Post?

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

By

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.  

Plus Premium
 
 
Note: Want to add some source code? Type <pre><code> before it and </code></pre> after it. Find out more
  • http://nosefrog.com samer

    this is so beautiful

  • Pingback: My Stream » Changing the Fonts of Your WordPress Site – Part 1: Using a Plugin

  • http://pippinsplugins.com Pippin

    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.

    • http://myqrd.net Fouad
      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

  • Pingback: Changing the Fonts of Your WordPress Site – Part 1: Using a Plugin | Wptuts+ | WordPress news and tips

  • dj

    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.

    • http://myqrd.net Fouad
      Author

      Thank you for the suggestions, dj. I’ll definitely include them in the second part.

      Thanks!
      Fouad

  • http://wordpresstechniques.com/ fiona Collins

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

  • Frei

    Didn’t anybody see that typo?

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

    • http://myqrd.net Fouad Matin
      Author

      Oops! Good catch Frei!

  • Pingback: Plugin wordpress. : Blogul lui Bucur

  • http://www.yourdigitalspace.com Swamykant

    This is a cool plugin. Thanks for the details.

  • Pingback: Changing the Fonts of Your WordPress - Part 2: Theme Integration | Wptuts+

  • Pingback: My Stream » Changing the Fonts of Your WordPress – Part 2: Theme Integration

  • Afrim

    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.

  • http://www.nowxx bencn

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

  • Pingback: 30+ Best WordPress Tips and Tutorials of November 2011 | WPhub.biz

  • Pingback: - Build a Blogg

  • Pingback: The A to Z of Wordpress Typography - WPKewl!

  • Antonio

    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.

  • http://apadong.com/ ARS

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

  • http://www.datingafterdecades.com Tracy

    This was EXTREMELY helpful to me–thanks!

  • Sophia

    DUDE – THANKS – straight to point.

  • http://www.lightheartexa.com Lauren

    This is supposed to be for beginners?! I am very intelligent but am not a web developer, and do not know the meaning of such jargon as “Divcontainer”!!! During all the custom “CSS” demo parts, this guy flies through it using this jargon – and on a screen that is too small to read some of the fine print (such as what the hell he’s typing in the comment box)!

  • J

    Is there a part 2?

    • http://wp.envato.com/ Japh Thomson
      Staff

      Hi J, yes there is! We just didn’t have this series combined into a series, which I’ve now rectified, so it’s easier to find Part 2 through the link at the top of this Part 1 now :)

  • Kacie

    i have tried to use a font that isnt on Google Webfonts by following your directions, but i cant seem to get it to work. Is there anyway you can help me? I want to change just the title of my posts and sidebar titles. (my blog is currently still in creation mode, but if you can help me, i will send it to you). I want to use the font Oh {Photo} Shoot! (i have the font on my computer and saved to my ftp) but for some reason, it will not show up as the font on my page. Please feel free to contact me with more questions you may have.

  • Pingback: How to change fonts in WordPress? | My Tech Blog

  • http://www.itechminder.com/ Zareen Khan

    my dear thanks to part 1 butt is there a art 2 ?

  • rZr

    Try WP font-face plugin — no hassle, registrations– it just works!

  • http://www.facebook.com/EugenCPopa Eugen Popa

    Hey,

    Thank you for the video.
    I watched it carefully and followed the steps.. Nothing happened :(

    I use an Eleven40 Theme on Genesis framework.

    What do you adive?

    Thank you

  • jagdeep singh

    Thanks For Video..Download Font Free

  • henryvps