CSS font-family
The appearance and layout of HTML pages are controlled by a language called CSS (Cascading Style Sheets). The font-family property in CSS determines the desired fonts for the text in an HTML element. The concept of 'font-family' can be divided into basic and more detailed aspects.
Basics Concepts of font-family
Font Family Name: A font family name can be given as a text value.
Example
body {
font-family: "Arial", "sans-serif";
}
In this case, the browser will attempt to use the Arial font. If Arial is unavailable, it will fall back to a default sans-serif font.
Generic Font Families
If specific fonts are not available, you can rely on one of the five generic font families. These generic families include:
Serif: Commonly used for formal or traditional content.
Sans-serif: Often used for modern and informal content.
Monospace: Used to maintain character spacing or display code.
Cursive: Imitates handwriting or script-like fonts.
Fantasy: Refers to decorative or stylized fonts.
Advanced Concepts of font-family
Font Stacks
If the chosen font isn't available, you can list alternative font families. This is called a font stack.
Example
h1 {
font-family: "Helvetica Neue", "Arial", sans-serif;
}
In this case, the browser will first try to apply the "Helvetica Neue" font. If that's not available, it will attempt to use Arial, and if that fails, it will fall back to a generic sans-serif font.
System Fonts
CSS allows the use of system fonts that are pre-installed on a user's device. You can tell the browser to use the operating system's default font by specifying the generic name of the font family.
Example
p {
font-family: -apple-system, BlinkMacSystemFont," Segoe UI", Roboto, sans-serif;
}
In this case, the browser will use the system's default fonts. It will apply the Apple system font on Apple devices, San Francisco on macOS, and Segoe UI on Windows.
Web Fonts
These are custom fonts loaded from a remote server rather than being installed on the user's device. To include and use web fonts in your CSS, you use the '@font-face' rule.
Example
@font-face {
font-family: "MyWebFont";
src: url("my-web-font.woff2") format("woff2");
}
h2 {
font-family: "MyWebFont", Arial, sans-serif;
}
This example uses the '@font-face' rule to import the "MyWebFont" web font, which is then used in the 'font-family' property.
These are the basic and more advanced concepts related to the 'font-family' property in CSS. By using various font families, you can control the appearance of text on your website.
Types of a font-family in CSS
Serif Fonts: Serif fonts have small decorative lines or strokes at the ends of letters, known as serifs. They are often seen as more formal and traditional, commonly used for body text in printed materials. Examples include Georgia, Times New Roman, and Garamond.
Sans-serif Fonts: Sans-serif fonts lack these decorative lines, giving them a modern and clean appearance. They are commonly used for digital screens and online content. Examples include Arial, Helvetica, and Verdana.
Monospaced Fonts: In monospaced fonts, each letter occupies the same amount of horizontal space, also known as fixed-width fonts. They are typically used for coding, terminal displays, and tabular data. Examples include Consolas, Monaco, and Courier.
Cursive Fonts: Cursive fonts mimic handwriting or calligraphy, with letters that connect and flow together. They are used for decorative or personalized touches. Examples include Lucida Handwriting, Zapfino, and Brush Script.
Fantasy Fonts: Fantasy fonts feature imaginative and elaborate designs, often with unique and decorative letterforms. They are used for creative and artistic purposes, such as logos and posters. Examples include Chiller, Jokerman, and Ravie.
These five font categories offer a variety of styles and characteristics to suit different design goals and visual preferences.
