jump to navigation

How to Add Custom Fonts on Your WordPress website July 6, 2011

Posted by Tournas Dimitrios in Wordpress - 3.

A few years ago the only way to use custom fonts on your site ( let say for your logo )  was : using images . Although alternative techniques where used like image replacement  ,  it was still a graphical representation of the text and not the text itself . Another popular way to use custom fonts was the Flash replacement technique , and sIFR and FLIR are  an good example  .  These solutions had a couple drawbacks like : a slight increase in load time and some browsers where set up to block Flash content . With that said , also an alternative solution came on the front : Javascript Fonts .

The concept is simple : usually fonts are in the form of  vector , raster and True-Type (ttf developed by Apple ) . These formats are converted to an Javascript file as follows :

  1. Choose a font , I use this site , and upload it to Cufon Generator
  2. Let Cufon make the heavy work for you and download the Javascript fonts-file
  3. Upload this file to your server and add a couple javascript lines to your page

Don’t panic this article doesn’t expect from you to know Javascript , thanks to WP-Cufon  WordPress plugin . The steps to follow are :

  • Download and enable the WP-Cufon plugin
  • Create a folder “ fonts ” in  WordPress-Root/wp-content/plugins
  • Upload into fonts folder  the Javascript font file that was created from Cufon Generator in previous paragraph
  • Make some basic configurations on the WP-Cufon plugin
    Admin -> Appearance -> Cufon
  • Cufon’s configuration has a basic tutorial to get started
    Well at least you should have a base CSS knowledge or ( Goooogle )

The following picture shows an practical example of my article :

Of course there are alternative solutions to embed custom fonts on WordPress :


No comments yet — be the first.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s