Jan 29

Add Custom Fonts to your WordPress Site

Filed under: Web Design, WordPress

main-image In the old days if you wanted to have a non-standard font on your site that was viewable by your visitors, you would need to provide a download link so they could add the custom font onto their computer. This was a little clunky, but it allowed a better user experience and would help mesh your design together. One can only handle so much Verdana and Arial each day.

Fast-forward about 10 years. There have been great strides in font technology on the web. The first well-known solution was sIFR, a Flash-based solution that converted your text into a .swf file which is viewable by most modern browsers. Adding a custom font became a little easier. However, the coding required made these sites a little sluggish and needed javascript and Flash to be enabled.

Of course most of the good stuff on the web these days requires javascript, but that still meant sIFR needed Flash. An alternative that uses pure code and no proprietary filetypes came along, called FLIR. Now this solution lets your site break free of the Flash requirement. It does however require PHP to be installed on your web host. This isn’t a huge obstacle since most commercial host companies offer PHP scripting.

Now to the good stuff concerning WordPress users. The guys over at HostScope.com have developed a plugin that achieves FLIR goodness in an easy admin interface. I use this plugin to carry over the custom font in my logo to the sidebar headings on the right.

Step 1: Installation

Download, install and activate TTFTitles.

Step 2: Uploading Fonts

Navigate to the Appearance section of your WordPress admin. You’ll find the TTF Titles section under this heading. Go to the Fonts link and upload your custom font.

Step 3: Creating Styles

styles Navigate to the Styles section of the TTF Titles admin. You can adjust how your custom font will be viewed from here. I have a specific style for my sidebar and one for the ‘Leave a Comment’ element that is in the content section. I believe the plugin uses PNG-8 because you must designate a background color. The green background of the sidebar style did not look appealing on the white of the content section. I’d love for the author to update the plugin to use PNG-24, allowing for a style to be used anywhere.

Step 4: The Code

Applying the styles to your site is relatively easy, even for those who don’t know PHP. For instance, in the second sidebar on the right, the title code used to be…

<h3>Recent Articles</h3>

To render the title with my font I simply wrap the text with a little PHP like this…

<h3><?php the_ttftext("Recent Articles"); ?></h3>

Use the following code when adding the functionality to a WordPress variable.

<?php get_bloginfo('name'); ?>
... turns into ...
 <?php the_ttftext(get_bloginfo('name')); ?>

The previous implementations assume you’re using the style set as default. To use a different style like I have for my comment section you would code as follows.

<?php the_ttftext("Leave a Comment", true, "Opus on white", ""); ?>

This pulls in the name of your custom style in the third parameter. The last parameter is for alterations to the style, similar to inline styles in CSS. I can designate a different color, font size, or any other available attributes.

So now you can have more control over the user experience by adding custom fonts. Let me know how you’ve implemented this on your site.

Comments

masukomi
Monday, March 23rd, 2009 at 9:57 am

So, it’s a plug-in that converts text into images, kind of like the image editing program pretty much everyone has on their computer already… I’m just not seeing the benefit here, and if if doesn’t take care to cache the images it’s generating then it could be potentially wasting cpu cycles too…

Reply to This Comment
Jason Reply:
March 23rd, 2009 at 2:29 pm
Hi masumomi. Thanks for the reply.

Well it does cache. I just failed to mention it in the article. As for myself with 10 years experience using Photoshop, this saves time when all I have to do is type out some text and have it show up as an image.

The main benefit would be for people who don’t own an image editing program. Also, I could code my theme to make each H1/H2/H3 into a custom font. That would take a one-time edit of the code instead of constantly having to use an image editing program.

Maybe I should write an article about how to do that.

Reply to This Comment
Joni Mueller Reply:
September 13th, 2009 at 4:25 pm
Masumomi, you are missing the point of the plugin. Why should someone open their image editing software to create a custom title banner every time they create a new blog post? That’s ridiculous. This generates that ON THE FLY, dynamically, which is one of the whole points of having a CMS. Why you can’t see a benefit in that is beyond me.

Reply to This Comment
ndop
Tuesday, April 28th, 2009 at 6:01 am

I’ll try it..

hope that it works to my blog..

thanks for sharing..

Reply to This Comment
ndop
Tuesday, April 28th, 2009 at 9:41 am

I have a question, how to change the widget title sidebar font into a custom font. I try to change in function.php but it doesn’t work. maybe you have a tutorial for this?

Reply to This Comment
Jason Reply:
April 28th, 2009 at 10:33 am
If the widget you’re using in the sidebar has a title within its coding, you’ll need to modify that specifically. But for the sidebars I’m using now, I just add a section for the title right before it calls the widget. This is in my ’sidebar4.php’ file.

<div id=”sidebar4″ class=”sidebar”>
<img src=”<?php bloginfo(’template_directory’); ?>/images/testimonial.png” class=”ribbon” alt=”What others are saying”/>
<div class=”block_inside”>
<ul>

<li id=”other-talk” class=”widget”><h3><?php the_ttftext(”Other Talk”); ?></h3></li>

<?php if ( function_exists(’dynamic_sidebar’) && dynamic_sidebar(4) ) : else : ?>
<?php endif; ?>
</ul>
</div>
</div>

If you’re still having problems, let me know which plugin you’re using and I’ll dive into the code.

Reply to This Comment
ndop Reply:
April 29th, 2009 at 6:48 am
thank you for that answer. Wow, should I make a lot of sidebar when I wanna make a lot of text widget?

right now, my blog has a custom font at sidebar widget. For my blog, I just add css style for each widget class.

For my text widget, maybe I’ll try later.

Thank you for your reply

Reply to This Comment
ndop Reply:
April 29th, 2009 at 7:57 am
Yes, finnaly I’ve got the answer from here

The file that contains all the default widget code is BASE/wp-includes/widgets.php. In each widget’s code, the title is produced by an expression like this:

$before_title . $title . $after_title

You can give them prettified titles by changing these to look like this:

$before_title . the_ttftext($title, false) . $after_title

and it works for my blog and my wordpress theme blog

Jason Reply:
April 29th, 2009 at 1:14 pm
The main reason why I created multiple sidebars is for the design. Each sidebar is a separate box on the right side.

When I started developing this site I bought the Rockstar WordPress Designer ebook and used one of the included themes. Of course I modified it to suit my needs, and that is where the multiple sidebars come in.

I like how you’ve used it on your sites. Very cool!
SiDi
Friday, May 8th, 2009 at 1:24 am

Hi i wish to to post arabic in my posts ( half arabic half english) is this the right plugin to help me

Reply to This Comment
Jason Reply:
May 8th, 2009 at 6:07 pm
The TTF Plugin is mainly for short phrases or a single word used as headings or titles. It would cause a lot of extra server CPU usage if you use it for full articles.

After doing a little research via Google, it seems that most Microsoft machines support Arabic lettering.
Here’s their official page:
http://www.microsoft.com/globaldev/handson/dev/mideast.mspx
And a related page that tests Unicode support of Arabic characters on your machine:
http://www.alanwood.net/unicode/arabic.html

If you find that your visitors can’t view Arabic characters, try out the dynamic solutions using PHP and Javascript.
http://www.dezinerfolio.com/2008/01/02/php-javascript-image-replacement/
http://www.marcofolio.net/webdesign/use_a_custom_font_on_your_website.html
But again, because it creates images, it might cause extra server cycles.

Cufon is another javascript based solution and is supported in most, if not all, major browsers.
http://wiki.github.com/sorccu/cufon/about
Cufon also seems to be the leader in this area with great support and development.

Let me know what works for you, and possibly link the sites so I can test them on my machines.

Reply to This Comment
c1ph4
Wednesday, May 13th, 2009 at 10:18 am

thank you very much for this advice!!

this plugin is CrAzY! I already experimented with “flir”, “custom fonts” and whatnot and never achieved my goals.

It was always a thorn in my eye with these 0815-fonts in the title on the frontpage.

Again, thanks! ^^

All the best,
c1

Reply to This Comment
Jason Reply:
May 13th, 2009 at 12:22 pm
Hey c1, glad you like it. I had the same experiences where none of the other general plugins worked like I wanted. Good to see you have it implemented on your site.

-Jason

Reply to This Comment
Ed
Thursday, May 14th, 2009 at 12:30 pm

I love this, it’s exactly what I’m looking for, but I’m having a heck of a time getting it to work. All I want to do is replace the title font with my TT font. If I read correctly, it should be a simple edit to my header.php file? Here’s the header code, any help would be HUGE!:

<html xmlns=”http://www.w3.org/1999/xhtml” >

<meta http-equiv=”Content-Type” content=”; charset=” />
<meta name=”generator” content=”WordPress ” />
<link rel=”stylesheet” href=”" type=”text/css” media=”screen” />
<link rel=”alternate” type=”application/atom+xml” title=”Atom 0.3″ href=”" />
<link rel=”alternate” type=”application/rss+xml” title=” RSS Feed” href=”" />
<link rel=”pingback” href=”" />

» Blog Archive

<!–
#blogtitle{
background:url(”/images/title-img.php?var=”) no-repeat left top;
}
–>

<a href=”">

<form id=”searchform” action=”/” method=”get”>

<input type=”image” id=”searchsubmit” value=” ” src=”/images/spacer.gif” />

<a href=”" title=”RSS Feed”><img src=”/images/spacer.gif” alt=”Subscribe RSS” class=”rss”/>

Reply to This Comment
Jason Reply:
May 14th, 2009 at 2:37 pm
Hey Ed,

Well it seems some of your code was clipped.
What I can say though is that the TTF code should be put inside the DIV with the ID of ‘blogtitle’. Try using the following code:

<div id=”blogtitle”><a href=”<?php bloginfo(’url’); ?>”><?php the_ttftext(”Radio JimmyDreamz”); ?></a>

Let me know if you need any more assistance. I’m happy to help!

Reply to This Comment
Jason Reply:
May 14th, 2009 at 2:54 pm
Ok I replied too soon. The above code is if you want to hardcode the title into your site. I don’t think many people would change their site title very often. But use the following code for a more future-proof solution.

<div id=”blogtitle”><a href=”<?php bloginfo(’url’); ?>”><?php the_ttftext(get_bloginfo(’name’)); ?></a>

Reply to This Comment
Tarka
Thursday, May 21st, 2009 at 2:59 am

Great post, I am trying to change the nav bar to include this nifty little peice of code but I am not having much success. The ‘Home’ part is working fine but I can’t get the rest of the nav bar to change. The code I am using is:

<a href=”">

Reply to This Comment
Tarka
Thursday, May 21st, 2009 at 3:03 am

Ahhh, not having much luck at putting up my code either… do I need to put something around it to stop it showing up as a link?

Reply to This Comment
Jason Reply:
May 21st, 2009 at 12:01 pm
You need to put the HTML version of the greater than and less than characters instead of the actual characters.

< = <
> = >

Give me the link to your site and I can review your problem.

Reply to This Comment
Therese
Tuesday, June 2nd, 2009 at 10:15 am

I am so going to buy a book on coding. I managed to some how managed to hide everything below the header LOL, do you know how that happen. I put in the code, but then when it messed up, tried to change it back, but nothing.

Subscribe

You can subscribe by email to receive newsletter updates:
<form action=”http://www.feedburner.com/fb/a/emailverify” method=”post” onsubmit=”window.open(’http://www.feedburner.com/fb/a/emailverifySubmit?feedId=’, ‘popupwindow’, ’scrollbars=yes,width=550,height=520′);return true” class=”subscribe”>

That and then I left the others changed

<h5

Thanks

Reply to This Comment
Jason Reply:
June 2nd, 2009 at 3:56 pm
Therese, did you happen to make a backup of your site? If so, just restore that backup.

Or if you have the original theme, you could upload it to your themes directory with another name, such as ‘theme-backup’. Then activate that theme in the Appearance panel.

Let me know if you need any help! Lets get your site working again. Then I can help you get the plugin to work.

Reply to This Comment
Therese Reply:
June 2nd, 2009 at 8:23 pm
I did not make a backup I just did get my theme back, now I am going to try and figure out how to do the backup, I have a lot to learn. Can you see how my recent posts, comments on the side bar run into each other, that is what I wanted to change, to make them stand out more and to make them so people can read them easier.

Thanks for your help I really do appreciate it, if you can tell me how to change the text in my side bar, that would be great. Thanks so much

Reply to This Comment
PCLove
Tuesday, July 14th, 2009 at 10:22 am

Will you soon be implementing admin options to include theme injection? Your explanations don’t point to which files and lines of code need to be edited.

Please help. I want to customize the fonts for elements h1, h2, h3 and a few more div items, as well as the post titles.

Sorry if this is a stupid question, but my eyes are bugging out from reading code.

Reply to This Comment
Jason Reply:
July 14th, 2009 at 12:18 pm
This tutorial goes beyond simple plugin installation. It requires a little bit of coding knowledge and specifically how Wordpress works. Each theme can be structured differently, therefore I can’t reliably tell you which file to edit.

This is not my plugin, so I won’t be developing admin options for it. But I can help you find the correct part to edit if you’d like. Send me an email through my contact form or reply here. I see you have post titles with graphical text. Is that using the TTF Titles plugin?

Also, a book that helped me a lot is Rockstar Wordpress Designer. The link is at the bottom of this page.

Reply to This Comment
KO
Sunday, July 19th, 2009 at 6:12 am

Hi your information has been very helpful but I am also having trouble placing the code in a way where the header title font “UpscaleHype Video” changes to the Black rose ttf font I prefer. I tried this code:

<a href=””>

that one you recommended to Ed, I’m not sure if I’m doing something wrong or not.
Here’s a part of the header.php:

–>
}

div#container {

padding-left: px;
padding-right: px;

}
.colone {width: px;}
.colthree {width: px;}

table#logoarea {
border-spacing: 0px;

}

.logo {

}

h1.blogtitle,
h2.blogtitle {

}

h1.blogtitle a:link,
h1.blogtitle a:visited,
h1.blogtitle a:active,
h2.blogtitle a:link,
h2.blogtitle a:visited,
h2.blogtitle a:active {
color: #;
font-weight: ;
}

h1.blogtitle a:hover,
h2.blogtitle a:hover {
color: #;
font-weight: ;
}

p.tagline {

}

Let me know whether I should email you the entire header.php

Thanks in advance

Reply to This Comment
Jason Reply:
July 19th, 2009 at 3:30 pm
PHP code won’t show up on my comments. If you want to show it, take out the ‘greater than’ and ‘less than’ characters.

I visited your site and it seems to be working fine, unless of course you’ve actually created the image in a program. Let me know what’s going on. I’d be happy to help.

Reply to This Comment
KO Reply:
July 19th, 2009 at 4:51 pm
I figured out the problem,thanks

Reply to This Comment