Set the Font Family
By Stephen Bucaro
Use the font-family property to set the text font. Font family values you include
arial, courier, times, erdana, and many more.
<p style="font-family:times;">This Font is Times.</p>
This Font is Times.
<p style="font-family:courier;">This Font is Courier.</p>
This Font is Courier.
• Note: In html the <font face> tag was used to set the font family i.e.
<font face="Arial">. The <font> tag was deprecated in HTML 4.0 in favor of style sheets.
• Note: If the font that you specify is not installed on the users computer,
a default or substitute font will be used. This could produce unpredictable results. A web-safe
font is guaranteed to be present on allmost all computers. Try to always use a web-safe font.
The only truely web-safe fonts are arial,courier,times, and verdana,.
If you want to use a different font, you should specify one of the web-safe fonts
as a second choice, as shown below.
<p style="font-family:comic sans MS,verdana;">This Font is Comic.</p>
This Font is Comic.
The examples here use in-line style. To specify the font for all paragraphs
on a webpage, you would use an embeded style block, i.e. you would paste the code
shown below into the head section of your webpage.
If the font that you specified is not available on the user's system, it will choose
a replacement. It may choose a font that you don't like. However, the font-family
property allows you to define one or more alternate fonts, as shown below, that can be
substituted if the primary font is not available.
Start with the font you want, and list alternate fonts in order of desirability.
More CSS Quick Reference:
• Set the Border Properties
• Use an External Style Sheet
• Descendant Selector
• How to Use a CSS ID Selector
• Set the Text Alignment
• Set Text Justification
• Set the Font Slant
• Set a Background Image
• Set The Cursor Style
• Set an Element's Overlap (z-index)