Adding Custom Fonts to a Web Page

Charlie R. Claywell
Web page

The correct fonts create a visual impact for your site, which makes the site easier to read and, in some cases, reiterates a brand. Only a few web-safe fonts exist, and you can't control which fonts are installed on the user's machine. For the most part, however, you can control which fonts appear when a user loads your site into their browser.

Control the Font with CSS

The preferred and simplest way to make sure your fonts appear in the user's browser is by using the CSS @font-face rule. Two steps are required for this approach.

Creating the Font Files

The way any of the processes work for displaying a font is to place a specific font file on your server, and then call out to it. This allows your font to load on the web page instead of the default font inside the user's machine.

With the @font-face method, it is probably safest to create three versions of the font file: .tff, .eot and .woff to accommodate older browsers. These three versions will cover everyone since newer browsers can read .woff, and all browsers, except Internet Explorer, can read .tff. The .eot file can be read by older versions of Internet Explorer.

Since most fonts come in the .tff format, you will need to convert your font to an .eot or .woff. Free online converters can quickly accomplish this.

Displaying the Font

Once you have the two files loaded onto your server, create the CSS coding to pull the font into your HTML page. The font-family and src properties are required, the other properties are optional.

Your coding will look like this:

@font-face
{
font-family: myFirstFont;
src: url('Name_of_Font.ttf'),
url('Name_of_Font.eot'); /* IE9 */
}

Optional properties of the @font-face rule include:

  • Font-stretch: This property determines the width of the font -- it defaults to normal. Options include: condensed, ultra-condensed, extra-condensed, semi-condensed, expanded, semi-expanded, extra-expanded and ultra-expanded.
  • Font-style: This defaults to normal; other options include italic and oblique.
  • Font-weight: This determines the boldness of the font. It defaults to normal; other options include bold and 100-900.
  • Unicode-range: This property defines the range of unicode characters supported by the font. The default is "U+0-10FFFF".

JavaScript

The main weakness of using the CSS @font-face rule is that it does not work in older browsers. JavaScript offers a safer way to display fonts while browsers catch up with the CSS option. Several steps are involved in this method as well, but the end result is the same - the ability to use any font on your site.

Creating the Font Files


The first step in the method is creating a couple of files for the fonts. Take your existing font file and convert it with a cufón generator. The tool creates two JavaScript (.js) files that you upload to your server: cufon-yui.js and MyNewFont.font.js (the name of the font you are using).

To create the cufon-yui.js file:

  1. Right click on the Download link in the menu bar
  2. Select Save Target As and save the .js file to your machine.

To create the MyNewFont.font.js file:

  1. Upload your font file into the generator
  2. Select checkboxes as needed.
  3. Submit and the tool will convert your font into a .js file.

Displaying the Font

Once the .js files have been uploaded to the server, call out to them from your web pages.

To accomplish this:

  1. Inside the <head> section of the site's layout template or the web page it will be used on, insert these two lines of coding (this presumes you have a js folder for all your JavaScript files):
    • <script type="text/javascript" src="js/cufon-yui.js"></script>
    • <script type="text/javascript" src="js/MyNewFont.font.js"></script>
  2. To replace the fonts inside your site's pages, use this coding:
    • <script type="text/javascript"> Cufon.replace('h1'); </script>

Flash

Adobe Flash has been a go-to solution for customs fonts for years. This is because fonts are embedded in the .swf 'movie' which means the the fonts appear on the user end regardless of whether or not the fonts are installed on the user's machine.

Creating the Font Files


Finding the Embed option is dependent upon Flash version:

Older versions placed the option in the FLA library under New Font.

Newer versions follow the same concept by placing the Embed option inside the library associated with the FLA you have open. Here is one way to access the embed option in CS5:

  1. Open your FLA file, and highlight the text you want to embed.
  2. From the Library Pane, go to Character>>Embed.
  3. This will bring up the Embed panel with your font already highlighted.
  4. Chose attributes you want the font to have (italic, bold, etc.)
  5. In the Character Ranges section, include any characters (like - dashes) you want to embed.

Remember the larger the range, the larger the .swf will be. If your site will primarily be viewed on a mobile device, like an iPad, do not use this method because Flash does not render on these machines.

Displaying the Font Files

To place the .swf on your page, you can use the <object> tag to embed it.

<object width="400" height="400" data="myFont.swf"></object>

sIFR (Scalable Inman Flash Replacement)

This is a more complex method that uses a combination of Flash, JavaScript and CSS to read the space where the custom font will be displayed and then flows in the font.

How It Works

Although knowing how it works is not required, understanding what transpires can assist you when using this method.

  1. Your web page loads into a browser.
  2. JavaScript checks to see if Flash is installed. If it is, JavaScript looks for the CSS tags, ids or classes you designated for custom fonts.
  3. JavaScript now runs through the source code and measures each element you chose in Step 2.
  4. Once measured, the JavaScript creates Flash movies with the same dimensions to overlay the original elements.
  5. ActionScript inside of Flash then draws the text in the font you chose.

There's only one weakness with this approach, besides being more complicated. In the rare situation where either Flash is not installed or JavaScript is turned off, your page renders without the custom fonts.

How to Do It

Using this method requires a thorough understanding of Flash so you can create the Flash movie containing your fonts. You will also need to download a zip file containing the sIFR files.

  1. Download and extract this file.
  2. Open the sifr.fla file
    • Double click on the text area.
    • Enter your text and select the desired font from your machine
    • Export this file as fontname.swf
  3. Local the sifr.fla file -- you will use this file to create a 'movie' of your font.
  4. Attach the two CSS stylesheets to your website by placing this coding in the <head> section:
    • <link href="sIFR-print.css" rel="stylesheet" type="text/css" media="print" />
    • <link href="sIFR-screen.css" rel="stylesheet" type="text/css" media="screen" />
  5. Include the JavaScript file by placing this code in the <head> section:
    • <script src="js/sifr.js" type="text/javascript"></script>
  6. Add this JavaScript code inside the <body> element:
    • <script type="text/javascript">
      //<![CDATA[
      /* Replacement calls. Please see documentation for more information. */
      if(typeof sIFR == "function"){

      };
      //]]>
      </script>
  7. Add this line to the coding in Step 5 to modify the function command:
    • sIFR.replaceElement(named({sSelector:"h1", sFlashSrc:"impact.swf", sColor:"#000000"})); Modify this coding to grab the selectors and the Flash file specific to your application.

Finding Great Fonts

If you are not satisfied with the available fonts when you're designing your page, several online sites provide free web-friendly fonts. FontSquirrel is an especially popular site with an added bonus. In addition to its free fonts, the site also has a webfont generator which allows you to create a .tff of your favorite font. Once you find the fonts you want, you're ready to begin work on your web page.

Adding Custom Fonts to a Web Page