The font-family
property is used to set font families are applied to the web page. You can set multiple font families, so that a browser can render alternative font families when a specific font is not available on a certain device.
Deciding which font family or typeface is one of the most important design aspects of website design. As there are many font families available, you need to carefully select the font families you want to use on your website.
The font family is a collection of fonts that are designed under a common design theme. Each font family has a different font weight (e.g., thin, regular, bold) and italic font, etc.
Font families can be categorized under generic families which are related to the origin of each font family. For example, Serif, Sans-Serif, and Monospace are frequently used generic families. Each has unique design aspects.
Serif font families tend to have finishing strokes and create a traditional impression. Some examples of such font families are Times New Roman, Georgia, and Garamond.
Sans-Serif font families are plain at the end of strokes and create a more modern impression. Some examples of such font families are Helvetica, Arial, and Verdana.
The criterion of a monospace font is that each letter has the same fixed width. The monospace fonts are often used to set samples of computer code. Some examples of such font families are Monaco, Courier and Menlo.
Fonts on websites are a user's computer dependent. Your selected font may not be rendered properly in website viewers' browsers if the font is not available in their browser. To avoid rendering very different fonts, when you set the font-family
property, you need to specify multiple font families followed by a generic family.
A browser tries to render fonts using the first font family specified. If the font family is not available, the browser tries the next one. Generic font families are a fallback mechanism. If none of the specified fonts can be rendered, the browser picks a similar font in the generic family.
If the font name has a space such as Times New Roman, you need to use single quotes like 'Times New Roman'.
Add the code below at the end of the <body>
section in the chapter11.html file. In this code, we are setting different font families for each paragraph for practice purposes. (Usually, font families are set at the body element level.)
<h2>Font Family</h2>
<p>1. Font Family: Original</p>
<p style="font-family: serif;">2. Font Family: Serif</p>
<p style="font-family: roboto;">3. Font Family: Roboto</p>
<p style="font-family: roboto, sans-serif;">4. Font Family: Roboto, Sans-Serif</p>
<p style="font-family: monospace;">5. Font Family: monospace</p>
<hr>
Here are the output examples:
The font-family
property is used to set font families are applied to the web page. You can set multiple font families, so that a browser can render alternative font families when a specific font is not available on a certain device.
Deciding which font family or typeface is one of the most important design aspects of website design. As there are many font families available, you need to carefully select the font families you want to use on your website.
The font family is a collection of fonts that are designed under a common design theme. Each font family has a different font weight (e.g., thin, regular, bold) and italic font, etc.
Font families can be categorized under generic families which are related to the origin of each font family. For example, Serif, Sans-Serif, and Monospace are frequently used generic families. Each has unique design aspects.
Serif font families tend to have finishing strokes and create a traditional impression. Some examples of such font families are Times New Roman, Georgia, and Garamond.
Sans-Serif font families are plain at the end of strokes and create a more modern impression. Some examples of such font families are Helvetica, Arial, and Verdana.
The criterion of a monospace font is that each letter has the same fixed width. The monospace fonts are often used to set samples of computer code. Some examples of such font families are Monaco, Courier and Menlo.
Fonts on websites are a user's computer dependent. Your selected font may not be rendered properly in website viewers' browsers if the font is not available in their browser. To avoid rendering very different fonts, when you set the font-family
property, you need to specify multiple font families followed by a generic family.
A browser tries to render fonts using the first font family specified. If the font family is not available, the browser tries the next one. Generic font families are a fallback mechanism. If none of the specified fonts can be rendered, the browser picks a similar font in the generic family.
If the font name has a space such as Times New Roman, you need to use single quotes like 'Times New Roman'.
Add the code below at the end of the <body>
section in the chapter11.html file. In this code, we are setting different font families for each paragraph for practice purposes. (Usually, font families are set at the body element level.)
<h2>Font Family</h2>
<p>1. Font Family: Original</p>
<p style="font-family: serif;">2. Font Family: Serif</p>
<p style="font-family: roboto;">3. Font Family: Roboto</p>
<p style="font-family: roboto, sans-serif;">4. Font Family: Roboto, Sans-Serif</p>
<p style="font-family: monospace;">5. Font Family: monospace</p>
<hr>
Here are the output examples: