CSS Fonts

The CSS font properties allow you to style and manipulate text appearance on a webpage. This includes setting font families, sizes, weights, styles, line heights, and more. Fonts are an essential aspect of web design, contributing to readability and aesthetic appeal.

Key Points on CSS Fonts:

The font shorthand property combines font-related properties like font-style, font-variant, font-weight, font-size, line-height, and font-family.
Custom fonts can be loaded using the @font-face rule or via web font services like Google Fonts.
Use font-family to specify a prioritized list of font names, including generic family names like serif, sans-serif, and monospace.
The font-size property supports absolute (e.g., px, cm) and relative (e.g., em, %, rem) units.
The line-height property adjusts the spacing between lines of text.
The font-weight property defines the thickness of characters (e.g., normal, bold, lighter, or numerical values like 100 to 900).
The font-style property allows text to be styled as normal, italic, or oblique.
The letter-spacing and word-spacing properties control spacing between characters and words, respectively.

Font Size Value	Description
xx-small	Used to display the extremely small text size.
x-small	Used to display the extra small text size.
small	Used to display small text size.
medium	Used to display medium text size.
large	Used to display large text size.
x-large	Used to display extra large text size.
xx-large	Used to display extremely large text size.
smaller	Used to display comparatively smaller text size.
larger	Used to display comparatively larger text size.
size in pixels or %	Used to set value in percentage or in pixels.

Syntax for CSS Font:

Syntax Example


        /* Font shorthand syntax */
        .element {
            font: font-style font-variant font-weight font-size/line-height font-family;
                 }
        
        /* Example */
        .p {
            font: italic small-caps bold 16px/1.5 "Arial", sans-serif;
           }

Examples of CSS Font Properties:

The following examples demonstrate the usage of font-related properties:

Code Example: Font Family


            .div {
            font-family: "Times New Roman", serif;
               }

Output

This text is displayed using the "Times New Roman" font with a fallback to serif fonts.

Code Example: Font Size and Weight


            h1 {
            font-size: 36px;
            font-weight: bold;
               }

Output

This heading uses a font size of 36px and bold weight.

Code Example: Line Height


        .div {
            line-height: 1.8;
             }

Output

This paragraph has increased line height, improving readability by adding more space between lines.

Code Example: Custom Font


        @font-face {
        font-family: "CustomFont";
        src: url("custom-font.woff2") format("woff2");
                   }
        
        h2 {
            font-family: "CustomFont", sans-serif;
           }

Output

This text uses a custom font loaded with @font-face.

Common Font-Related Properties:

font-family: Specifies the font or a prioritized list of fonts for an element.
font-size: Defines the size of the text, supporting both absolute and relative units.
font-weight: Sets the thickness of the font (e.g., normal, bold, or numeric values).
font-style: Defines the style of the font (e.g., normal, italic, or oblique).
line-height: Adjusts the spacing between lines of text.
letter-spacing: Controls the space between individual characters.
word-spacing: Defines the space between words in a text.
text-transform: Modifies the capitalization of text (e.g., uppercase, lowercase, capitalize).

Proper use of font properties enhances the readability and aesthetics of your website. Choose fonts that align with your design theme and ensure accessibility through legible sizes and sufficient contrast.