Add Custom Fonts to your WordPress Site

main-imageIn 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 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

stylesNavigate 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

65 comments on this post.
  1. masukomiNo Gravatar:

    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

    JasonNo Gravatar Reply:

    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 MuellerNo Gravatar Reply:

    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

    masukomiNo Gravatar Reply:

    Well, now (9 months later), we’ve got the the ability to embed the font into the page with @font-face (example at ), 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

    JasonNo Gravatar Reply:

    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:

    “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 HughesNo Gravatar Reply:


    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

    JasonNo Gravatar Reply:

    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

  2. ndopNo Gravatar:

    I’ll try it..

    hope that it works to my blog..

    thanks for sharing..

    Reply to This Comment

  3. ndopNo Gravatar:

    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

    JasonNo Gravatar Reply:

    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”>

    <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; ?>

    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

    ndopNo Gravatar Reply:

    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

    ndopNo Gravatar Reply:

    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

    JasonNo Gravatar Reply:

    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!

  4. SiDiNo Gravatar:

    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

    JasonNo Gravatar Reply:

    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:
    And a related page that tests Unicode support of Arabic characters on your machine:

    If you find that your visitors can’t view Arabic characters, try out the dynamic solutions using PHP and Javascript.
    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.
    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

  5. Menambah (install) Font Sendiri di Blog Wordpress | dzofar si tukang vector™:

    […] yang ini, saya belum mencoba, tapi kalau sampeyan mencobanya, saya yakin akan berhasil. Soalnya banyak yang […]

  6. c1ph4No Gravatar:

    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,

    Reply to This Comment

    JasonNo Gravatar Reply:

    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.


    Reply to This Comment

  7. EdNo Gravatar:

    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=”” >

    <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

    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

    JasonNo Gravatar Reply:

    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

    JasonNo Gravatar Reply:

    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

  8. TarkaNo Gravatar:

    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

  9. TarkaNo Gravatar:

    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

    JasonNo Gravatar Reply:

    You need to put the HTML version of the greater than and less than characters instead of the actual characters.

    &lt; = <
    &gt; = >

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

    Reply to This Comment

  10. ThereseNo Gravatar:

    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.


    You can subscribe by email to receive newsletter updates:
    <form action=”” method=”post” onsubmit=”‘’, ‘popupwindow’, ‘scrollbars=yes,width=550,height=520’);return true” class=”subscribe”>

    That and then I left the others changed



    Reply to This Comment

    JasonNo Gravatar Reply:

    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

    ThereseNo Gravatar Reply:

    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

  11. PCLoveNo Gravatar:

    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

    JasonNo Gravatar Reply:

    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

  12. KONo Gravatar:

    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 {


    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

    JasonNo Gravatar Reply:

    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

    KONo Gravatar Reply:

    I figured out the problem,thanks

    Reply to This Comment

  13. Any feedback is good feedback - Website Babble Webmaster Forums:

    […] This article is about adding custom fonts to your wordpress site, hope it helps.…ordpress-site/ […]

  14. Add Custom Fonts to your WordPress Site | Mesmer Lab | WordPress News:

    […] Link: Add Custom Fonts to your WordPress Site | Mesmer Lab […]

  15. AngelicaNo Gravatar:

    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

    JasonNo Gravatar Reply:

    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

    AngelicaNo Gravatar Reply:

    Thank you! Installed the plugin and now everything works like a charm! 🙂

    Reply to This Comment

  16. AleNo Gravatar:

    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

    JasonNo Gravatar Reply:

    @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:

    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

  17. AlexaNo Gravatar:


    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

    JasonNo Gravatar Reply:


    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.

    So then you’d navigate to the following folder and upload your 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

    AlexaNo Gravatar Reply:

    @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

    AlexaNo Gravatar Reply:

    Also, it was saying this before I added the new font. I put the font exactly where you said to.

    JasonNo Gravatar Reply:


    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.

    AlexaNo Gravatar Reply:

    @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??

    StefNo Gravatar Reply:

    @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 🙁

    JasonNo Gravatar Reply:

    @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.

  18. 1 Quick Way to Increase Your Website’s Visibility | Mesmer Lab:

    […] return visits by potential green-thumbers. For some reason, people think I’m an authority on how to add a custom font to WordPress. Go […]

  19. coryNo Gravatar:

    thank you. I love this tool.

    Reply to This Comment

  20. How To Install Custom Fonts In Wordpress Using Typekit — SmashinGeeks - Blogging | Designs | Tutorials | Graphics | Wordpress | Blogging | Tech News | Downloads:

    […] content text in your desired font by making the text as an Image. You can get more information here on how can you install and use this plugin […]

  21. JackNo Gravatar:

    Will old version plugin works in new version of WP ?

    Reply to This Comment

    JasonNo Gravatar Reply:

    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

  22. BilalNo Gravatar:

    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

    JasonNo Gravatar Reply:

    Here you go. Chris Coyier is your source for anything CSS-related. 😉

    Reply to This Comment

  23. AzraelKansNo Gravatar:

    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

    JasonNo Gravatar Reply:

    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

  24. how to install fonts in wordpress:

    […] […]

  25. AlexandreNo Gravatar:

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

    Reply to This Comment

    JasonNo Gravatar Reply:

    Translation: “Thanks for the tips, the layout is much more beautiful and professional with stylized fonts. Thanks!”

    Reply to This Comment

  26. EveNo Gravatar:

    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

  27. 5 Plugins for Magazines and Newspapers -

    […] TTFTitles gives you the ability to add custom fonts to your posts. Technology has changed so much that you do not now require your viewers to have a custom font installed on their machine in order to view it. Installation is easy and you can upload new fonts from your WordPress installation as well. […]

  28. Kristina RNo Gravatar:

    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!!!!

    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

  29. 5 plugins WordPress para revistas y diarios online:

    […] Fuentes personalizadas Complementa tu publicación con la posibilidad de añadir fuentes personalizadas a tus publicaciones. El usuario ya no necesita tener una determinada fuente instalada en su dispositivo para poder visualizarla. La instalación es sencilla, puede subir sus fuentes directamente desde el admin de WordPress. Descarga y guía de TTFTitles […]

  30. Ben StuartNo Gravatar:

    Many thanks for this, very helpful.

    Reply to This Comment

  31. David Yip | 5 Plugins for Magazines and Newspapers | Page: 1 | David Yip:

    […] TTFTitles gives you the ability to add custom fonts to your posts. Technology has changed so much that you do not now require your viewers to have a custom font installed on their machine in order to view it. Installation is easy and you can upload new fonts from your WordPress installation as well. […]

Leave a comment