Add Custom Fonts to your WordPress Site

What if your application is declined Vitel Payday First, Are You Eligible

Jan 29

Add Custom Fonts to your WordPress Site

Filed under: Tutorials

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.

Related Blogs

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
masukomi Reply:
December 28th, 2009 at 10:37 pm
Well, now (9 months later), we’ve got the the ability to embed the font into the page with @font-face (example at http://craigmod.com/journal/font-face/ ), which is supported by most all of the current browsers. So, the need for this is pretty much moot, and will become totally moot as time goes by.

But, this article didn’t say anything about using it for every new blog post. All the examples were for static portions of the site. Recent articles, Blog name, Leave a comment, etc. Which is a one time up front cost that using a plugin for autogeneration of every page load can really hose you if you’ve the misfortune of being linked to by any site/person with a serious following.

Reply to This Comment
Jason Reply:
January 8th, 2010 at 2:03 pm
The main issue with @font-face would be the website owner’s rights to distribute the font(s) they use.

Even though those fonts you find on the internet are free, you gotta check the fine print. I bet at least one of those typographists doesn’t allow free distribution of their work.

Check this article:
http://www.alistapart.com/articles/cssatten

“Although the legal status of font shapes is uncertain, font names are probably covered by copyright law. As such, fonts are similar to copyrighted images and text. To publish copyrighted material on the web, you need permission from the copyright holder.”

So in essence, there are websites like TypeKit that handle all the legal stuff for you. But for most people who don’t care to pay for legal access for their personal blog, they have the alternative of using an image with their preferred font’s representation contained within. If this isn’t legal, then everyone creating web layouts in Photoshop then cutting up the text into different images is guilty of copyright infringement.

Yes, I agree @font-face is a step forward.
No, I don’t agree it makes TTF Titles obsolete, now or ever.

Eddi Hughes Reply:
December 28th, 2009 at 6:49 pm
Jason,

Her comment goes without proper explanation as to why this could potentially be a scalability issue. If, for example, you are using WordPress Mu with hundreds of blogs on the network. What would happen if all these blogs were restricted to one theme using this plugin? Would the image be generated every impression? If cached on a per-user-bases, is it designed to serve the single cached image for multiple users on multiple blogs / sites (Multi-Site Manager for Mu). How often is the cache image refreshed?

Reply to This Comment
Jason Reply:
January 8th, 2010 at 2:06 pm
I’m neither the author of this plugin nor enough of a PHP programmer to deconstruct it. So I couldn’t tell you how the caching works.

Good point though. Maybe the author could shed some light on it. (hint, hint)

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
Angelica
Friday, January 8th, 2010 at 9:54 am

I tried to use the PHP lines inside a page but it seems they only work in the documents I write in my text editor. Is this the case or Is there a way I haven’t figured out?

Great Plugin by the way. Having to go with standard fonts for user compatibility have always annoyed me.

Reply to This Comment
Jason Reply:
January 8th, 2010 at 1:44 pm
Well PHP code, and really anything except HTML/CSS, is disabled within the WordPress page/post editor. You need another plugin to allow PHP code to be rendered there. All the examples I listed in this article are done within the Appearance > Editor section of the WordPress admin.

The plugin I use for this function is Exec-PHP. One warning: if you have multiple people editing your blog, you should install a role manager plugin to limit usage of PHP code.

Let me know if this helps.

Reply to This Comment
Angelica Reply:
January 8th, 2010 at 5:20 pm
Thank you! Installed the plugin and now everything works like a charm!

Reply to This Comment
Ale
Wednesday, February 17th, 2010 at 5:02 am

Hi is there a chance to add hover functionality to add another image for that?

Is it possible to add antialias function too? because with transparent backgrounds is not so good.

Reply to This Comment
Jason Reply:
February 17th, 2010 at 2:34 pm
@Ale, sorry but I didn’t create the plugin. I’m not sure what would be involved in creating a hover image on the fly. You might contact the plugin author:
http://www.hostscope.com/wordpress-plugins/ttftitles-wordpress-plugin/

As for the antialias, I had to create different styles with the appropriate background colors for my sidebar and my content areas.

Hope this helps!

Reply to This Comment
Alexa
Friday, March 5th, 2010 at 12:27 pm

Hi,

I’m setting up my blog, and want to use custom font in my titles… Which, is why I am here. I installed the pulgin just fine. (although it does say something about the cache) However, I can not get the font to upload!! My font is on my computer and is a .otf file. Is that the problem?? I’m not sure how to change it…

Reply to This Comment
Jason Reply:
March 5th, 2010 at 12:59 pm
@Alexa,

Are you trying to upload the font in the Appearance section of your blog as told in step 2 above?

If so, and you can’t upload that way, you can navigate to the correct folder with an FTP program. I use Filezilla on my Windows machine, a free download. They also have a Mac and Linux version.

http://filezilla-project.org/download.php

So then you’d navigate to the following folder and upload your fonts.

/wp-content/plugins/ttftitles/fonts/

Then go back to the plugin settings and refresh the page. Hopefully it will detect the new fonts.

Please do these steps and then return with your results.

Reply to This Comment
Alexa Reply:
March 5th, 2010 at 2:08 pm
@Jason, That worked! The font is now there… However, I’m having some other issue now.

Above the page where it is supposed to show me samples it says cache directory “/home/dood/public_html/blog/wp-content/plugins/ttftitles/cache” is not writable. Cache directory “/home/dood/public_html/blog/wp-content/plugins/ttftitles/cache” is not writable.Cache directory “/home/dood/public_html/blog/wp-content/plugins/ttftitles/cache” is not writable.

Meaning I have the plugin in the wrong place?? How can I correct this? Thanks so much!!

Reply to This Comment
Alexa Reply:
March 5th, 2010 at 2:10 pm
Also, it was saying this before I added the new font. I put the font exactly where you said to.

Jason Reply:
March 5th, 2010 at 2:36 pm
@Alexa,

No, you have the plugin in the right place. The problem seems to be the cache directory does not have the correct permissions. In your FTP program, right-click on the ttftitles folder and check the 3-digit number.

Set that folder to 777.

Here’s a link to describe the operation, and around the middle of the page is a section on how to do this in Filezilla.

Alexa Reply:
March 5th, 2010 at 2:59 pm
@Jason. I changed it and updated it… There is no longer a message about the cache, however, when I create a new style, it doesn’t show up! Also, the only installed font is now my custom one… The others are still in the font file though… Any idea as to what’s wrong??

Stef Reply:
April 4th, 2010 at 3:08 pm
@Alexa, @Jason, I have exactly the same issue. And I chmod the cache directory several times nothing changed. I even tried to create a new cache directory (or a directory with different name…) nothing the message still appears

Jason Reply:
April 6th, 2010 at 7:38 am
@Alexa, I’m sorry. Your last comment must have slipped under my radar.

Do you have a cache plugin that takes care of the whole site? Something like WP-Cache or WP-Super Cache. If so, try deleting that cache and see what happens.

Stef, you can try the same.

Other than that, go to the plugin website and see if there’s a similar problem addressed there. Also you can contact the original plugin developer directly via his site.

http://wordpress.org/extend/plugins/ttftitles/
cory
Saturday, April 24th, 2010 at 10:04 pm

thank you. I love this tool.

Reply to This Comment
Jack
Thursday, October 14th, 2010 at 12:12 pm

Will old version plugin works in new version of WP ?

Reply to This Comment
Jason Reply:
October 15th, 2010 at 4:44 pm
It is working perfectly on my site. The headers in the right sidebar are using it.

But in the article area I’m using an @font-face solution for the headers.

Reply to This Comment
Bilal
Saturday, October 16th, 2010 at 3:01 pm

Hi Jason,

Thanks for sharing such great information but I need to use custom fonts in my CSS of wordpress theme. Fonts which are installed on my system comes up whenever i change them but it never comes up to the one who doesn’t have installed that font onto his system. So I need something that it must show up onto other systems too.
Please I really need help.

Thanks in advance.

Reply to This Comment
Jason Reply:
October 17th, 2010 at 9:09 am
Here you go. Chris Coyier is your source for anything CSS-related.
http://css-tricks.com/snippets/css/using-font-face/

Reply to This Comment
AzraelKans
Friday, December 17th, 2010 at 3:26 pm

My site works on permalinks, the ttf_title works on the home page but not in the others what can I do?

Reply to This Comment
Jason Reply:
December 27th, 2010 at 6:07 am
Hello Azraeil.
On inspecting your site, it seems you have figured out the problem. If this is not the case, please let me know.

Reply to This Comment
Alexandre
Wednesday, March 21st, 2012 at 3:50 pm

Obrigado pelas dicas, o layout fica muito mais bonito e profissional com as fontes estilizadas. Valeu!

Reply to This Comment
Jason Reply:
June 20th, 2012 at 4:13 am
Translation: “Thanks for the tips, the layout is much more beautiful and professional with stylized fonts. Thanks!”

Reply to This Comment
Eve
Friday, March 23rd, 2012 at 5:50 am

I use the Typography tool provided by Lubith in order to customize the fonts in my WP sites. in this way i don’t have compatibility or copyright issues and has great extensions, even handwriting fonts or additional supported scripts.

Reply to This Comment
Kristina R
Wednesday, June 20th, 2012 at 5:16 pm

I’m so close, but can’t finish. This is what I did down below. When you load a new page, the header shows my custom font but then it looks like my theme code is overriding my custom font because it changes on the screen. The code below is from my css stylesheet. Can I do this? Thanks so much!!!!

/*Headings
/*———————————————————————————–*/
h1, h2, h3, h4 {
color: #000;
line-height: 1.5em;
font-weight: normal;
text-transform: capitalize;
letter-spacing: 1px;
font-family: ‘P22 Vincent’, arial, serif;
}
h1 {
font-size: 24px;
margin-bottom: 10px;
line-height: 1.2em;
}
h2 { font-size: 21px }
h3 { font-size: 18px }
h4 { font-size: 16px }
h2, h3 {
margin-top: 10px;
margin-bottom: 5px;
}
h1 a, h2 a, h3 a, h4 a { color: #2E70B1 }

Reply to This Comment
Ben Stuart
Saturday, September 1st, 2012 at 5:29 am

Many thanks for this, very helpful.

Reply to This Comment