CSS Web Fonts - Detailed Overview

Introduction to Web Fonts

Web fonts are fonts that are hosted online and can be loaded and used in web pages. They allow for a wide range of typographic choices and can enhance the design of a website. The most common ways to use web fonts include:

Linking to web font services like Google Fonts
Using @font-face rule to include custom fonts
Applying web fonts to elements using CSS

Using Google Fonts

Google Fonts provides a wide selection of fonts that can be easily integrated into your web project. To use a Google Font, you need to include a link to the font in the <head> of your HTML and then apply the font using CSS.

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

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

This text is using the Roboto font from Google Fonts.

Using @font-face

The @font-face rule allows you to define custom fonts that you host on your own server. You specify the font's name and the source of the font files.

@font-face {
    font-family: 'Open Sans';
    src: url('https://www.shariqsp.com/fonts/OpenSans-Regular.woff2') format('woff2'),
         url('https://www.shariqsp.com/fonts/OpenSans-Regular.woff') format('woff');
}

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

This text is using the Open Sans font defined with @font-face.

Font Styles

Fonts can be styled using CSS properties such as font-family, font-size, font-weight, and more. Here's an example using the Lora font:

body { font-family: 'Lora', serif; }

This text is using the Lora font with serif styling.