Fonts. Who needs ’em?

You do!

Come a little closer, I promise not to bite. I’m going to let you in on a really big secret.

If you haven’t noticed – the hot trend for website design has been using unique fonts for a sometimes stunning effect.

Traditional graphic designers have been rejoicing breaking away from the standard boring set of web fonts and SEO experts have simultaneously been rejoicing the breaking away from the use of Flash (swf) or pixelated images to show stylized text.

Now, search engines can SEE, and design doesn’t have to suffer!

Font integration for the web has come a long way. So much so, that you can now integrate a ton of fonts into your existing WordPress site quite simply and FREE! Although there are a lot of ways to integrate fonts into a WordPress driven website, the following is by far my favorite.

Introducing Google Fonts

Currently, there are 293 Google Fonts and the collection is growing. Feel free to take a look:
http://www.google.com/webfonts

How do we get them on our WordPress site?

Through a plugin of course!

While you’re signed in to the back end of your site, search for, install and activate a plugin with the name “Fontific“. Here is Fontific’s page on WordPress.org, if you want to take a gander or install it manually:
http://wordpress.org/extend/plugins/fontific/

Once the plugin is activated, a “Fonts” menu option will appear under “Appearance”. Click there to begin building your font rules, and become the mad scientist we all know you are! Mwahahaha!

A tip to get you started:

Headings

To apply your font rule to a particular type of heading – say for the largest heading, simply type “h1” (no quotes) where it says “Enter selector here”. Then select a font, font size, color and so on.

Fontific font pane
Click to view larger.

Headings go from h1 all the way to h6 – and search engines LOVE when you use headings effectively on your web pages.

[divider top=”0″]

Advanced

Font styling doesn’t have to stop at just headings. You can apply font rules to any bit of text on your site. If you’re more advanced, you can “Inspect Element” to view the code and find out what label has been applied to each element, which will allow you to be very specific with your styling.

If you see <p id=”superimportantstyling”> you would use a “#” (pound sign) in the font selector box before the name, like this: #superimportantstyling

On the other hand, if you see <p class=”superimportantstyling”> you would use a “.” (period) in the font selector box before the name, like this: .superimportantstyling

# = id
. = class

Have fun & let me know if I can be of assistance along the way.

1 thought on “Fonts. Who needs ’em?

Leave a Comment