The TTFTitles WordPress Plugin
This plugin lets you use images to replace the titles of your posts, thus circumventing the problem of guessing what fonts your end-users might have installed.
This is primarily a reworking of the Image Headlines plugin by Brian “ColdForged” Dupuis, so that it would work in WordPress 2.3. Of course, THAT was a reworking of another plugin by Joel Bennett. Anyway, this plugin lets you replace text on your site (titles specifically, but you can actually replace just about anything) with atttractively rendered TrueType Fonts images.
The README file included in the zip archive explains some details of installation, such as permissions for the fonts and cache directories.
If you use this, I’d love to hear about. If you have problems, I’d love to hear those two. Feel free to leave comments here in either case.
Admin Interface
You get a new tab under Presentation called ‘TTF Titles.’ This has three subtabs: ‘Styles,’ ‘Cache,’ and ‘Fonts.’
In the ‘Styles’ tab, you can define different text styles. A style includes the font, size, color, shadow, spacing, etc. The styles you define here will be used in template tags in your theme files.
In the ‘Cache’ tab, you can set a few particulars about the image cache, basically where it is and how long images last before they expire.
In the ‘Fonts’ tab, you can install fonts, view those already installed, and delete ones you no longer need.
Template Tags
There are two template tags you can use to actually make the text images show up:
<?php the_ttftitle(before, after, display, style, overrides); ?>
<?php the_ttftext(text, style, overrides); ?>
The tag ‘the_ttftitle’ can be used to replace ‘the_title.’ The first three arguments for the_ttftitle are the same as for the_title. The tag ‘the_ttftext’ can be used to turn any chunk of text into an image.
The ’style’ argument should be the name of a style defined in the ‘Styles’ tab. You can use ‘null’ for this argument to use the default style.
The ‘overrides’ argument can be used to override any of the parts of the style. It should look like: name1=val1&name2=val2… The variables you can override are:
| Variable | Meaning | Example |
|---|---|---|
| font_name | the name of the font | Warp 1 |
| font_size | the font size to use | 24 |
| font_color | the color of the text | #FF0000 |
| bg_color | the background color | #FFFFFF |
| bg_transparent | make the background transparent? | true |
| bg_image | an image to put in the background | null or a filename |
| indent | indent of the first line | 5 |
| maxwidth | how wide a line can be… 0 for no limit | 500 |
| subindent | indent for subsequent lines | 20 |
| leading | space between lines | 10 |
| effect_type | what kind of shadows? | none, hard_shadow, or soft_shadow |
| soft_shadow_color | the color of the soft shadow | #000000 |
| soft_shadow_spread | how fuzzy the shadow is | 5 |
| soft_shadow_x_offset | horizontal offset of the shadow | 3 |
| soft_shadow_y_offset | vertical offset of the shadow | 3 |
| hard_shadow_color_1 | hard shadow inside color | #FFFFFF |
| hard_shadow_color_2 | hard shadow outside color | #000000 |
| hard_shadow_offset | hard shadow offset | 2 |
Styling the Images
Beyond the ’styles’ used by TTF Titles, you might also want to apply some CSS properties to the resulting images. To make this easier, the images are marked as belonging to the class ‘ttf’. This was added in 0.1.5, when I realized I wanted to style just the text images and couldn’t.
Updates
- 10/18 – 10:04 – Version 0.1.1 released. Added error suppression for when then font does not contain all the characters you need. Also updated README to be clearer when it comes to permissions.
- 10/18 – 10:13 – Version 0.1.2 released. Got rid of some pesky control-Ls in the code. My bad.
- 10/18 – 10:58 – Version 0.1.3 released. Removed call to str_split that was causing problems for some people.
- 10/18 – 17:20 – Version 0.1.4 released. Minor cosmetic change that should make things clearer when defining a new style.
- 10/23 – 19:31 – Version 0.1.5 released. Removed the ‘border=0′ from the img tags and added style=”ttf”. Who am I to say they shouldn’t have borders? Also, this makes them easier to style in general.
- 10/25 – 17:27 – Version 0.1.6 released. Small change to provide compatibility back to WP 1.5.2.
- 11/13 – 12:01 – Version 0.2 released. Added a ‘Usage’ tab and the letter_case style feature.
- 11/13 – 07:10 – Version 0.2.1 released. Fixed a really really sloppy bug. My bad!
- 11/13 – 07:58 – Version 0.2.2 released. Fixed an even dumber bug.
- 12/10 – 16:35 – Version 0.4.1 released. Should have been 0.4.0, but I messed up with svn check in. Added contextual help. Fixes a few bugs.
- 12/11 – 07:02 – Version 0.4.2 released. Fixed incompatibility with older PHPs
[...] not be stored on your readers’ computers. Between all of the helpful advice John provides on the plugin’s homepage, and a timely, kind word of advice from RT Richardson at ‘GothchiC-omic.com’ who I [...]
I got ttf_title to work on my site which is wonderful, specifically for the navigation bar(all the code I have found should work if you convert it over from & to &, problem is how do you make a menu that is going to use the is_home feature to change hte css so it is different, so instead, it will change ttf so it uses a different style (like for a example
will change the css. Any way of incorporating is_home so we can change it? or any code hints?
welcome.
Erica
@erica-
I must figure out why WordPress keeps nuking code. In any case, the best way I can think to use is_home to modify the ttf style is something like:
the_ttftitle('', '', true, 'my_home_ttf_style');
} else {
the_ttftitle('','',true,'my_nonhome_ttf_style');
}
first of all i want to say – AWESOME plugin, thank you!! i had no trouble installing it or displaying the tags in my template.
now, one minor question i’m hoping you can help me with. the text spacing in the image generated by ttftitles is a bit wider than with the same font in photoshop. in a regular block font this probably wouldn’t matter but i am using a script font so it looks a bit weird.
ttftitles image: http://www.elizabethannedesigns.com/blog/wp-content/plugins/ttftitles/cache/93153e1304430bec0acf39cd6c9a24a4.gif
photoshop image: http://www.elizabethannedesigns.com/blog/wp-content/themes/EADBlogStyle/images/diy-inspiration.png
the font is exmouth, located here: http://www.elizabethannedesigns.com/blog/wp-content/plugins/ttftitles/fonts/exmouth.ttf
my settings are:
lettercase: unchanged
effect type: none
any thoughts? it’s not a deal breaker but it is kind of bizarre?
thank you!!
I suspect this comes from a difference in the hinting engines in FreeType vs. Adobe. Someday fonts will be sane, but alas we aren’t there yet. My apologies.
I’m on 2.8.4 and for the life of me can’t figure out why this has stopped working (also using Firefox, not sure if it matters). The strange thing is, if I set the path for the cache folder and fonts to localhost/blah/blah instead of home/blah/blah, I at least see references to the styles I created, but still no actual image. Any ideas? I really adore this plugin – one of the only ones I use on almost every install.
Working fine in 2.8.4 on a couple of my installs. I’m not sure what to tell you.
Same exact thing happened to me two days ago. Worked perfectly in 2.8.4 and made absolutely no changes. i disabled all plugins just in case there was a conflict. cleared my computers cache and plugin cache.. pretty sad bc my blog image is based on this good lucking plugin.
well i dont know what to do any suggestions JRRL?
Hmmm… Can you see your error log and to see if there is anything being reported there? Also, can you get previews of styles in the style edit screen? Try making a new style to see if it works. I’m trying to figure out if your machine is failing to make the images or failing to show the images, if that makes sense. If it can show make and show images in the admin interface, then something weird is going on in the theme or another plugin is stomping things. If it can’t do it in the admin interface, there has to be a permissions problem or something fundamental has changed on your machine (like a PHP being installed without GD or without Freetype or something like that).
The error log would be the best bet for diagnostic information.
I’m trying to make this work with Atahualpa Theme 3.4.2. I can’t seem to find where to add/change the ttftitle. Any advice?
Ah. Atahualpa is a tricky case, because there are so many ways you can customize it. Depending on what you are doing, you probably want to make the following changes to functions/bfa_post_parts.php:
There may be other place where you’ll need to change things (in particular, functions/bfa_postinfo.php line 461 might need to be changed over to the_ttftitle).
If you could confirm what works when you get it sussed out, that would be helpful for anyone else using Atahualpa. Thanks.
Thanks jrrl! That did work! (Without eidting functions/bfa_postinfo.php)
Is it possible to do the same thing to where the page names are listed in the menu bar?
It’s possible, but not as simple. As far as I can tell (and I’ll admit to not being an atahualpa expert) the menus are generated by wp_list_categories and wp_list_pages (depending on the menu). You’d have to do some funky preg_replace work in bfa_hor_cats.php and/or bfa_hor_cats.php. You’d need to find the bit of text inside of each anchor tag and replace it with the result of calling ttf_text on that same text with the ‘echo’ parameter set to true.
Let us know if you go for it.
Can you post what your functions/bfa_post_parts.php looks like? I tried editing mine in a php editor and the line numbers are not matching up with my file. I’m guessing there’s too many spaces somewhere in my file.
hi, great plugin got it working perfectly straight away!
Just one question – is there any way of constraining the proportions of the type produced so that the images produced aren’t stretched or compressed at all? It’s really noticeable on some posts
I have not seen this problem at all. Anywhere. Are you perhaps setting a size to the images in css or something like that? If you figure it out, please let us know.
For some reason, my ttftitles have lost their descenders on the bottom line of the title. So if the title was “Happy To Be Here”, the parts of the p’s and the y that descend below the line will be cut off. Titles longer than one line will be fine for all but the bottom line. I lose descenders in both the blog and in the TTFTitles settings pages, and using all various fonts I have tried. The problem appears in the image source. Although I may have never noticed it, I don’t think that it was always there.
I have the same issue – it’s a new issue, not an old one – any fix for this yet?
I haven’t seen this one myself yet, but I’ll keep an eye out for it while I’m reworking the rendering engine (such as it is) over the next little while.
same thing going on over here. suddenly lost the descenders.. one day fine, next day not. i moved servers but am not having a problem of missing the gd library as i think if i was no images would be generated at all correct?
so strange!
Correct; no gd means no images. It is possible, I suppose, that something is different with FreeType.
In the new version I am trying to finish up, it makes the image on a bigger canvas to start and then trims to the edge the type/shadow. This should fix things if the ttftitles code is trimming off the bottom. If FreeType is messing up, um, no idea.
Thanks for responding.
I emailed my server host yesterday and they said that it’s likely my new server is on a newer version of the GD Library. Do you think that could be causing the problem?
hi there – just letting you know i confirmed with my server company that the version of freetype and GD library is the same as my old server. i suppose, unless there are other ideas, that i’ll just wait for the new version and hope that works (if you have a beta that would be awesome), and deactivate in the meantime. big boo as this plugin was one of my favorites!
I have exactly the same problem, there is setting a size to the headline images, but i think the major problem is, that the plugin does not even create the image correctly. when i take a lok i my cache, all the headline miss their lower part…. just like this:
http://www.duffbeers.de/duff/wp-content/plugins/ttftitles/cache/2114628746526e15b51618e7fa51e18e.png
mh, i did not find any equivalent plugin … so i’m still waiting for help
This plug-in does not accept Arabic characters. Unicode. Why? I wouldn’t have thought it would make much difference. Or that much harder to code.
Sorry one more problem. with Georgia Italic characters like p y get cut off.
@ http://www.alarabia.co.uk – any fix?
[...] 12. TTFTitles WordPress Plugin [...]
Curious if there’s a fix for this situation.
If the font’s title has an apostrophe in it, the font WILL show under the “fonts tab” however when applied to a style will say “found not found”.
I would REALLY appreciate a fix/update/workaround.
ah apparently I can not type at 2am, the error I get is “FONT not found” and this is in the Admin panel after attempting to save the style.
Hi Sarah: I’m not sure if you or jrrl ever resolved this, but I had the same issue. Solved it by going into /plugins/ttftitles/ttftitles.php and added stripslashes here…
$style['font_name'] = stripslashes($_REQUEST['font_name']);
Hope this helps, and maybe jrrl can include it in future updates!
I’m having trouble with foreign characters such as æ, ø, and å. They don’t display even though they are part of the font – they come up as rectangles instead. I’ve tried with different fonts and none of them work. Do you have any suggestions for workarounds?
Example: http://halkjaer.eu/FDF/?p=71
Thanks
Marie
Hmmm, that does look cruddy, doesn’t it? I know it works for some fonts and have yet to determine why it doesn’t for others. I suspect it is some encoding issue, but how I get PHP/GD/FreeType to deal with it remains an open issue. I’m sorry for not having a better answer right now.
My mistake. Of course this plugin only works with ttf-fonts, not the otf-fonts I was trying out. I found a ttf-font instead and now it works fine.
Thanks
Anyone wanting to know how to use this plugin with the Thesis theme, found this at the Thesis Support Forum:
http://diythemes.com/forums/customization/6742-making-favorite-plugin-ttftitles-work-w-thesis-1-5-a.html#post53025
I haven’t tried it yet, but plan to this evening or first thing tomorrow morning. Woo hoo.
Nice find. Thanks.
Hello all, I am trying to use this plug in to change the header ul li tag text. I administer the website for a friend and he uses a neat .ttf plugin for Photoshop. So is it possible to use this plugin to create custom .ttf images inside my header and
text.
In basic terms these are the page tabs on the main menu.
Lastly what would the syntax be for such a thing.
I am not sure I have enough information here for me to be sure what you need. Any other readers have an idea?
So far, this plugin works better than anything else I’ve tried (WP sIFR, FLIR for Wordpress). Though, the transparent background option does not work. I’m fine using .png, but no matter what (even if I set the bg color) it comes up with a white background.
Any idea?
I am (finally) trying to shape up a new version of the renderer which does the transparency very much right (at last). What this means for the IE6 folks, I don’t know, but that is a problem for the individual blogger, I suppose.
I’m having sort of a similar issue — no matter if I use png or gif, I can’t get transparency to work. I CAN set the BG color, but for some reason that only changes the background immediately behind the letters, leaving an odd white ring around the whole block.
‘Course now that I think about it, the ring probably has something to do with margins or padding or something. I’m using Atahualpa 3.4.2, WP 2.4.8.
Ah, I missed that the title is treated as an image within the post, so it was being bordered and styled as an image, hence the border. Duh.
OK the TTF plugin is designed to change the title view basically make it into an image utilizing any .ttf type file correct? Now I want to change the header menu font to a .ttf. Is this plugin capable of doing that? I don’t know a plainer way to state it. I don’t want the Titles functionality, I would like the plugin to change other text like items perhaps tags or something like that. In my initial posted the header menu bar is a User List specifically on my page it is referenced as:
CSS:
#nav ul {
float: left;
list-style: none;
margin: 0px;
padding: 0px;
}
#nav li {
list-style: none;
margin: 0px;
padding: 0px;
}
Header.php
<a href="/free-class/”>Free Class
<a href="/free-class/”>Home
etc etc for each remaining page I display on the main page. I want to change the “Free Class, Home” text to a .ttf style.
Can someone help me achieve this.
Some things where chopped here I edited what was parsed out:
OK the TTF plugin is designed to change the title view basically make it into an image utilizing any .ttf type file correct? Now I want to change the header menu font to a .ttf. Is this plugin capable of doing that? I don’t know a plainer way to state it. I don’t want the Titles functionality, I would like the plugin to change other text tags like H1, H2, H3 like items. In my initial post the header menu bar is a User List specifically on my page it is referenced as:
CSS:
#nav ul {
float: left;
list-style: none;
margin: 0px;
padding: 0px;
}
#nav li {
list-style: none;
margin: 0px;
padding: 0px;
}
Header.php
Free Class
Home
etc etc for each remaining page I display on the main page. I want to change the “Free Class, Home” text to a .ttf style.
Can someone help me achieve this.
Take a look at http://www.crossfithuntsville.com my header menu bar is what I want to change to .ttf if at all possible.
Love the plugin! Only problem I am having is that it only works part of the time for titles on my front page. I have it in a rotating post preview box.
I am using the code:
<a href="” title=”">
Any reason why it is only working for some of the post titles and for others it just puts the normal text?
Thanks!
so every time i try to replace the php for the blog name in the header. the text reads “could not find style”1″” any help?
For some reason TTFTitles has stopped working
It only shows the text and not an image. Any ideas why? I am using the current WP version and current plugin version…
thank you so much for your great plugin <3, i really like it. unfortunately i have a problem and i can`t figure it out."Something" is clipping my nice font at the bottom, so the "g" or "f" are displayed not really nicely.
I tried the plugin on ohter themes too and there i have not the problem at all. maybe there is somebody out there who could help me. i`m really stumped right now. I can`t figure it out. please help me. here a link to my site. Here screenshot were a marked the area, because the words are in german.http://www.lernen-am-pinkenhof.at/problem.jpg
Website:
http://www.lernen-am-pinkenhof.at/susi.php/?page_id=65
thx a lot, susi
I put the wrong email in the textfield. hoppfully somebody is replying von THIS email. :O) i hope so.
ok so i got my blog name to show up but the style is not working i have this
any help?
damn it didnt show up when i pasted it
[...] TTF Titles: dica especial pra quem, como eu, mata um leão por dia nos temas gratuitos instalados no blog. Sempre tem alguma coisa que detestamos. Pra muitos, as fontes disponibilizadas são uma calamidade; se este é seu caso, eis a sua salvação. Este plugin permite alterar a fonte e o tamanho das letras em cada pedaço do blog. Mão na roda, como dizem por aí. [...]
hi
i’m using the plugin for a new layout and it works just perfectly!but i wanted to know if it’s also possible to use it for the post date?that’d be even better!
[...] The TTFTitles WordPress Plugin – A plugin to let you swap out your post titles with dynamically-created images. [...]
[...] que hay un plugin: The TTFTitles WordPress Plugin @ WordPress Plugins __________________ Sector [...]
Hi, Im a newbie in blogging.. I tried your plugin but when I upload a font these appears:
Please help me..