Webdesigners always have to make sure that they use a common font for their website, otherwise it'll display incorrect on browser that don't have the font installed. This can be really annoying if you want to use a nice custom font. You could load the font in Photoshop and save it as an image, but this isn't dynamic and is not SEO. Here are two solutions on how to make dynamic custom fonts.

The font used above is called Diavlo and uses PHP Image Replacement. The other technique that you can use is sIFR. These can very good be used as attractive blog titles.

PHP Image Replacement

As you could see above, the dynamic text are all images. It uses PHP and JavaScript that replaces all the content in specified tags with images. For example, the dynamic tekst above uses the following code:

It's as easy as that. Now your browser will display the custom font correct, while the code will stay intact. This is important for SEO.

Customize

You can customize the files to your own needs.

ifr.js

replaceSelector(".title","ifr.php",true);
var testURL = "test.png" ;

1. .title - Tag (or Class) that will be replaced with images
2. ifr.php - Location of the PHP file that generates the images
3. true - Enable / Disable line breaks (Splits each word into an image so it can float)
4. test.png - Location of the test image

ifr.php

$font_file  = 'Diavlo.otf';
$font_size  = 30 ;
$font_color = '#000000' ;
$background_color = '#ffffff' ;
$transparent_background  = true ;

Change these values to your needs. Take note that the font_file is capital sensitive.

Upload all files to your PHP host and open index.php. You should now be able to see the custom font displayed as images.

Attached files:

Download Source

View Demo

sIFR (Flash)

The PHP Image Replacement works fine and is easy to install, but if you want more options (Selecting & copying the text, linking the replacement with an URL), you should take a look at sIFR. This works with Flash and doesn't need a PHP server.

Importing sIFR is a little bit harder than the PHP Image Replacement. First, import the correct files (JavaScript and CSS).

<link rel="stylesheet" href="sIFR-screen.css" type="text/css" media="screen" />
<script src="sifr.js" type="text/javascript"></script>
<script src="sifr-addons.js" type="text/javascript"></script>

Now put the CDATA at the bottom of your page, just before the </BODY> tag. You can customize this code to your own needs (Other font, color, size etc.), just make sure you read the documentation that you can find in the source.

<script type="text/javascript">
//<![CDATA[
if(typeof sIFR == "function")
{
sIFR.replaceElement("h2", "diavlo.swf", "#000000", null, null, null, 0, 0, 0, 0);
};
//]]>
</script>

Now all the things placed in a H2 tag will be replaced with the information found in the Flash (.SWF) file.

Attached files:

Download Source

View Demo

One final note: Don't use any of the above techniques to fully display your website in a custom font. It'll make your server slow due to heavy load and your readers will not like it. Good luck.

Interested in this topic? You might enjoy another article I've written called

• Best of the Best: 2009
• Sweet tabbed navigation using CSS3
• Browser size aware content scaling
• 8 different ways to beautifully style your lists
• On being Developer and Designer with Jacob Gube

Did you like this article? Subscribe to my feed or email to keep updated on new articles.

Spread the word and submit to: