Specifying Alternative Fonts for Selected Text


Text may be formatted with a different font and font size.

If you use a different font, be sure to specify one or more alternative fonts.  Use Times New Roman or Courier as one of your alternative fonts (since these are standard fonts on both Macintosh and IBM/compatible PCs).  In this way, if a user doesn't have a specific font you have chosen, the browser will then display the text using one of the alternative fonts.  To specify alternative fonts, you need to type the appropriate HTML.

Example for Specifying Alternative Fonts

The following code...

<P STYLE="font-family:Impact,Tahoma,Courier">
Penn State Behrend</P>

(typed on one line) produces this result...

Penn State Behrend    OR    Penn State Behrend    OR    Penn State Behrend

In the above example...  The words, Penn State Behrend, will be formatted with the Impact font if the user has this font installed on their computer.  However, if a user's PC doesn't have this font, then the browser will try to display the text using the Tahoma font.  If the user doesn't have the Tahoma font, then it will display the text using the Courier font.

There are other ways to specify fonts, such as using style sheets.


More Examples

Each of the examples below specify alternative fonts.  The alternative fonts are specified within the HTML code.  (Please note that the fonts:  Junk1, Junk2, and Junk3 are fictitious fonts.  They are used to show what will happen when a PC doesn't have a particular font.)

Example 1 - Penn State Behrend

  • The HTML code for example 1:  
    <P STYLE="font-family:Impact,Tahoma,Courier">
    Example 1 - Penn State Behrend</P>

  • 3 alternative fonts are given in the HTML code:  Impact, Tahoma, Courier

  • Impact is  available on the PC

  • As a result, the text is displayed using the first font (Impact)

Example 2 - Penn State Behrend

  • The HTML code for example 2:  
    <P STYLE="font-family:Junk1,Tahoma,Courier">
    Example 2 - Penn State Behrend</P>

  • 3 alternative fonts are given in the HTML code:  Junk1, Tahoma, Courier

  • The (fictitious) font, Junk1, is not available on the PC

  • As a result, the text is displayed using the the second font (Tahoma)

Example 3 - Penn State Behrend

  • The HTML code for example 3:  
    <P STYLE="font-family:Junk1,Junk2,Courier">
    Example 3 - Penn State Behrend</P>

  • 3 alternative fonts are given in the HTML code:  Junk1, Junk2, Courier

  • The (fictitious) fonts, Junk1 and Junk2, are not available on the PC

  • As a result, the text is displayed using the third font (Courier)

Example 4 - Penn State Behrend

  • The HTML code for example 4:  
    <P STYLE="font-family:Junk1,Junk2,Junk3">
    Example 4 - Penn State Behrend</P>

  • 3 alternative fonts are given in the HTML code:  Junk1, Junk2, Junk3

  • These (fictitious) fonts are not available on PC

  • As a result, the text is displayed using the browser's default font (usually Times New Roman)


Web site contact: ccwebmaster@psu.edu
Updated February 27, 2008
© 2005 The Pennsylvania State University