CSS font-family

HTML documents' appearance and layout are defined using the programming language named CSS (Cascading Style Sheets). The font-family attribute in CSS is employed to designate the desired font(s) for textual content inside an HTML element. The 'font-family' attribute is divided into primary and more complex concepts in this context:

Basics Concepts of Font Family

1. The name of the font family can be specified as a string value. For example:
Example
Copy
body {

     font-family: Arial, sans-serif;

   }
Try it Yourself

The browser will try to utilize the Arial font in this situation. If Arial isn't accessible, a standard sans-serif font will be used instead.

1. Generic Font Families: When typefaces are unavailable, one might fall back on one of five generic font families. The following generic families:

• ✅ "Serif": Usually utilized in more formal or traditional material.
• ✅ "Sans-serif": Frequently utilized for more contemporary and casual material.
• ✅ " Monospace": Used to preserve character alignment or show code.
• ✅ "cursive": Represents handwriting or typefaces that resemble script.
• ✅ "Fantasy": This term refers to decorative or fantasy-style typefaces.

Advanced Concepts of Font Family

When the designated font is not accessible, you can offer substitute font collections, a practice referred to as a font stack. For example:

h1 {

     font-family: "Helvetica Neue", Arial, sans-serif;

   }

In this scenario, the browser will initially try to implement the "Helvetica Neue" font style. Consequently, it will seek to employ Arial; if that's not feasible, it will revert to a generic sans-serif typeface.

1. System Fonts: CSS enables the utilization of system fonts already present on the user's device. By specifying the common name of the font family, you can direct the browser to utilize the default font of the operating system. For example:
Example
Copy
p {

     font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

   }
Try it Yourself

In this case, the browser will try to utilize the system's default fonts. It will utilize the Apple system typeface on Apple-branded devices, San Francisco on macOS, and Segoe UI on Windows.

1. Web Fonts: Custom fonts retrieved from a distant server rather than placed on the user's device are called web fonts. To import and utilize web fonts in your CSS, use the '@font-face' rule. For instance:
Example
Copy
@font-face {

     font-family: "MyWebFont";

     src: url("my-web-font.woff2") format("woff2");

   }

   h2 {

     font-family: "MyWebFont", Arial, sans-serif;

   }
Try it Yourself

This instance employs the '@font-face' structure to bring in the "MyWebFont" online typeface, which is then applied in the 'font-family' attribute.

These are the basic principles and advanced topics related to the 'font-family' attribute in CSS. You can control the appearance of text on your web pages by specifying various font families.

Types of a Font Family in CSS

There are five types or classifications of fonts are:

• ✅ Serif Fonts: Serif fonts include little artistic strokes or lines at the extremities of the letters, referred to as serifs. They are regarded as more formal and conventional and are often employed for body content in printed products. Georgia, Times New Roman, and Garamond are a few examples.
• ✅ Sans-serif Fonts: Sans-serif fonts lack serifs and have a more recent, clean look. They are frequently utilized for screen-based and digital entertainment. Arial, Helvetica, and Verdana are a few examples.
• ✅ Monospaced Fonts: Equal space is used between each letter in monospaced fonts, commonly called fixed-width fonts. Every letter takes up the same proportion of horizontal space as a result. They are often utilized in tabular data, terminal displays, and coding. Consolas, Monaco, and Courier are a few examples.
• ✅ Cursive Fonts: Cursive fonts imitate calligraphy or handwriting. They feature letterforms that flow together and seem handmade. Decorative or personal touches are often added to designs using cursive fonts, such as Lucida Handwriting, Zapfino, and Brush Script.
• ✅ Fantasy Fonts: Typefaces with beautiful and inventive flourishes are included in the category of fantasy fonts. They are frequently utilized for imaginative and artistic designs like logos, posters, and material with a fantastical theme. Unique and unusual letterforms may be seen in fantasy typefaces, integrating symbols or ornate motifs. Chiller, Jokerman, and Ravie are other examples.

These five font classifications offer a variety of styles and characteristics to cater to different design goals and visual preferences.