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