CSS - font-family



Font-family refers to the group or category of fonts that have similar design characteristics. It is a CSS property that is used to specify the preferred font or a list of fonts to be used on a webpage.

Possible Values

  • Specific font names: Examples include "Arial", "Times New Roman", "Courier New", "Verdana", "Helvetica", etc.

  • Generic font families: These are general categories of fonts that will be used if the specific fonts are not available. Examples include "serif", "sans-serif", "monospace", "cursive", "fantasy".

  • Font stacks: These are a list of fonts separated by commas, where the browser will use the first available font in the list. For example: "Arial, Helvetica, sans-serif".

  • URL: You can specify a custom font by providing the URL to the font file using the @font-face rule and then using that font's name in the font-family property.

Applies to

All the HTML elements.

DOM Syntax

object.style.fontFamily = "verdana,georgia,garamond,serif";

CSS font-family - Basic Example

Here is an example:

<html>
<head>
</head>
<body>
   <p style="font-family: verdana, georgia">The text is either verdana or georgia.</p>
   <p style="font-family: Times New Roman, Times, serif;">The text is Times New Roman.</p>   
</body>
</html>
Advertisements