This website uses cookies

We use cookies to personalize content and ads, to provide social media features and to analyse our traffic. We also share information about your use of our site with our social media, advertising and analytics partners who may combine it with other information that you've provided to them or that they've collected from your use of their services. Please read more at our privacy policy page.



Font-family

CSS font-family property allows us to create a prioritized list of font family names and/or generic family names for the selected element.

We use commas to seperate the values and show them as alternatives. The browser will select the first font to use if it is available, however, it may be unavailable in some cases like the user's computer doesn't have that font etc. When this situation occurs, the browser will try to use the next alternative to show the texts (or even a character which the first font cannot show).

There are two types of font family names:

1. family-name: It is the name of a font-family such as "times", "courier", "arial", etc.

2. generic-family: It is the name of a generic-family such as "serif", "sans-serif", "cursive", "fantasy", "monospace".

We should start with the font we want but we must end it with a generic-family. So that the browser can select a similar font from generic-family, if there is no other font available.

When we want to use unique font-family, we need to use @font-face property.

When the font name has a whitespace, it must be enclosed in quotation marks as follows: "Courier New".

CSS Syntax

font-family: font | initial | inherit;

Let's see an example:

<!DOCTYPE html>
<html>
   <head>
      <style>
          p {font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif }
     </style>
   </head>
   <body>

       <p>We used "Lucida Grande" font-family for this text.</p>

   </body>
</html>

Property Values

Value Descriptions
family-name
generic-family
It is prioritized list of font family names and/or generic family names.
initial It makes the property use its default value.
inherit It inherits the property from its parents element.