CSS Fonts

The fonts that you use on desktop and mobile devices are very important in the overall design and readablity of any website.CSS gives us the freedom to style fonts any way we want to create visibility, readability, and to express a brand. Now we will expand more on CSS Fonts, and how to use them correctly.

The font-family Property

The font-family property is used to define what font to use in a web page. 


     p {
         font-family: Arial, Helvetica, sans-serif ;
     }

You will always want to specify fonts as a comma separated list for when the user's machine does not have the first font installed.

Web Safe Fonts

These are fonts commonly available across most operating systems:

Web-safe fonts also ensure the appearance of the text will be consistent between browsers and systems.

Google Fonts Integration

To use beautiful and custom fonts, Google Fonts is the smart option. Example:


      <link rel="preconnect" href="https://fonts.googleapis.com">
      <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin >
      <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">
    

      body {
          font-family: 'Roboto', sans-serif ;
      }

This loads the Roboto font from Google's CDN and will apply it to your body text.

font-size Property

The font-size property will determine how big the text will be:


    h1 {
       font-size: 36px ;
    }

You may use values in px, em, rem, vw, etc.

font-weight: Bold or Light

This property adjusts the thickness of the font:


    strong {
       font-weight: bold ;
    }

    .light-text {
       font-weight: 300 ;
    }

Common values: normal, bold, bolder, lighter, or numeric values 100, 300, 700, etc.

font-style: Italic Text

Need italic text. Use font-style:


      blockquote {
          font-style: italic ;
      }

Other values include normal and oblique.

text-transform: Modifying Letter Case

This property changes the case of the text:


      .uppercase {
                  font-transform: uppercase ;
      }

      .lowercase {
                  font-transform: lowercase ;
      }

      .capitalize {
                  font-transform: capitalize ;
      }

line-height: Distance Between Lines

Improve readability by adding proper line spacing:


     p {
         line-height: 1.6 ;
     }

The values may be unitless (relative to font size), or with units like px, em, etc.

letter-spacing and word-spacing

You can use these properties to control the space between letters and words: Humanize Text


      h1 {
          letter-spacing: 2px ;
          word-spacing: 5px ;
      }

Shorthand: The font Property

This allows space between lines, which is helpful for long paragraphs. font shorthand:


      p {
        font: italic 600 16px/1.5 'Open Sans', sans-serif ;
      }

This sets font-style, font-weight, font-size, line-height, and font-family on one rule.The font values are important in order:font-style, font-weight, font-size (required), /line-height (optional), font-family (required).

Font Loading and Performance

Always load only necessary font weights and styles to avoid slowing down your site. Google Fonts allows selecting specific styles only.

Custom Fonts with @font-face

You can host fonts yourself using @font-face:


    @font-face {
           font-family: MyCustomFont;
           src: url('fonts/MyCustomFont.woff2') format('woff2');
           /* Add other formats like woff, ttf, eot for broader browser support */
    }

      p {
      font-family: 'MyCustomFont', sans-serif;
      }

This provides you control over font files and performance.

Conclusion: Fonts are Design

Fonts are more than letters, they are the backbone to your design. And when it comes to design and CSS you can indicate font style, size, weight, spacing and so much more. What this means is that you can develop a design that is recognizable, readable and pleasant to the eye.

So Bhai, tell your story with your fonts, one character at a time.

Try it Yourself