Embedding Fonts
By Submit Corner
Tell a Friend About This Page
Overview: Avoid using text as graphics and learn how to use the FONT tag
to embed the font of your choice without needing to create a graphic
Many web designers choose to use images to depict words and phrases. However,
oftentimes simply using font manipulation with special effects is often enough
to deliver the same impact as using a graphic but using significantly fewer
resources. This font tip works on almost all Windows machines, but may not work
with some Macintosh/Unix machines. If compatibility across all platforms is an
issue, you may not wish to implement this tip.
Sample Fonts
Sample Fonts |
Font Name |
Code Required |
Arial | <font face="arial" size=4>Arial</font> |
Verdana | <font face="verdana" size=4>Verdana</font> |
Garamond | <font face="garamond" size=4>Garamond</font> |
Helvetica | <font face="helvetica" size=4>Helvetica</font> |
Futura | <font face="futura" size=4>Futura</font> |
There are dozens of standard fonts that are distributed with every PC that can be used.
The above fonts are the standard True Type Fonts that are used dominantly on the web, but
essentially any font can be used that is installed on a client's computer.
Syntax: <font face="FONT NAME" size=4>Insert your text here</font>
Font Name: The True Type Font to use (ie: Arial)
Font Size: The Size of the text between -6 and +6
Combining Fonts: When one font may not be available to use, you can specify combinations
such that if the first font is not available, the next font will be used and so on. Below is an
example which will attempt to use Verdana, then Arial, then Helvetica. If none of these fonts is
available, the standard browser font will be used.
Sample: <font name="Verdana,Arial,Helvetica" size=2>Sample</font>
Important Note: It is important to ensure you use a font that your users have installed
on their computer. For this reason, we suggest using True Type Fonts that have become
standard on multiple platforms (not applicable for Macintosh/Unix computers).
Special Effects
Using fonts not only eliminates the need for using an image, but also permits the ability
to perform special effects with great ease. Web designers can easily add underlining,
bold, italics, strikethrough and different colors in a flash. The special effects table
below demonstrates the frequently used special effects:
Special Effects |
Effect |
Code Needed |
Bold | <b>TEXT</b> |
Italic | <i>TEXT</i> |
| <blink>TEXT</blink> |
Strikethrough | <strike>TEXT</strike> |
Small | <small>TEXT</small> |
|