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.
<style type="text/css">
p
{
font-family: verdana;
}
</style>
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.
<style type="text/css">
p
{
font-family:verdana,arial,courier;
}
</style>
Start with the font you want, and list alternate fonts in order of desirability.
More CSS Quick Reference:
• Set List Bullets Position
• CSS Units of Measurement
• Set the border-collapse
• How to Define and Apply a Style Class
• Set an Element's Clipping
• Set the Background Properties
• Context selectors
• Set the Font Style
• Set Text Justification
• Set the Border Properties
| 
About BTH
User Agreement
Privacy
Site Map
Contact
News Feeds
RSS Feed
Follow @Stephen Bucaro
General Web Design
