{"id":14698,"date":"2020-04-15T12:54:14","date_gmt":"2020-04-15T19:54:14","guid":{"rendered":"https:\/\/careerkarma.com\/blog\/?p=14698"},"modified":"2023-12-01T02:40:48","modified_gmt":"2023-12-01T10:40:48","slug":"css-font-family","status":"publish","type":"post","link":"https:\/\/careerkarma.com\/blog\/css-font-family\/","title":{"rendered":"CSS Font Family"},"content":{"rendered":"\n

Styling the text on a web page is an important part of web design. For instance, you may want headers to appear in a specific font, or all text on a page to use the serif<\/code> font.
<\/p>\n\n\n\n

That\u2019s where the CSS font-family property comes in. The CSS font-family property allows you to specify one or more font families which will be used to style the text on a web page.
<\/p>\n\n\n\n

This tutorial will discuss, with reference to examples, the basics of the CSS font-family property, and how you can use the property to style the text on a web page.
<\/p>\n\n\n\n

CSS Font Family<\/h2>\n\n\n\n

There are many aspects involved with styling a font in CSS, ranging from setting a color to the size of the font. One of the most important parts of styling a font, though, is to set the font family\u2014the style used by text on a web page.
<\/p>\n\n\n\n

To set the font family used by text on a web page, you can use the font-family property. The syntax for the font-family property is as follows:<\/p>\n\n\n\n

font-family: fontFamilyOne, fontFamilyTwo, \u2026;<\/pre><\/div>\n\n\n\n
The font-family property accepts either a single font or a list of fonts. If you specify more than one fonts, you should separate each font with a comma.
<\/p>\n\n\n\n
The order in which fonts appear is the order in which the browser will try to apply the fonts. The browser will default to using the first font in the list that either is installed or can be downloaded by the web browser. If that font is not available, the second font will be used, and so on.
<\/p>\n\n\n\n
It\u2019s important to note that the font-family property will select a font for each character in a block of text. So, if a particular character is not available in one font, the next font in your font family list will be tried, until a suitable font can be found.
<\/p>\n\n\n\n
When you\u2019re using the font-weight property, it is best to include at least one generic font family name (such as serif, sans-serif, or monospace). This ensures that if another font in your list is not available, the browser will still be able to select a font for the text on a web page to appear.
<\/p>\n\n\n\n
There are two ways in which you can use the font-family property. First, you can use the property to specify a custom font for a web page. Second, you can use the property to apply a generic font family to text on a web page. The generic font families available for use with the font-family property are as follows:
<\/p>\n\n\n\n