How To Add Font In CSS?

Last Updated : 09 Sep, 2024

Adding fonts to a website enhances its design and readability. In CSS, custom fonts can be applied using several techniques that allow web designers to include specific fonts that aren’t system defaults.

Prerequisites

These are the approaches to add a font in CSS:

Table of Content

Using web-safe fonts
Importing fonts from Google Fonts or other CDN-based font providers

Using web-safe fonts

In this approach we will use the web-safe fonts. They are predefined fonts that are universally available across most systems and browsers, such as Arial, Times New Roman, and Courier. These fonts do not require any external resource links.

Example: In below example we are adding the fonts in CSS using web-safe fonts. The font-family which will be used here is Georgia.

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport"
     content="width=device-width,
      initial-scale=1.0">
    <title>Web-Safe Fonts Example

    </title>
    <style>
        body {
            font-family: 'Georgia',
             serif;
        }

        h1 {
            font-family: 'Arial',
             sans-serif;
            color: green;
        }
    </style>
</head>

<body>
    <h1>Welcome to GeeksForGeeks</h1>
    <p>This paragraph uses the Georgia
        font, and the heading uses Arial.</p>
</body>

</html>

Output:

Importing fonts from Google Fonts or other CDN-based font providers

In this approach we will use Google Fonts which is a free library that provides access to various fonts which can be easily included in your website.

Example: In this example we are importing the google fonts to add font in CSS.The font family of the same is Roboto.

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport"
     content="width=device-width,
      initial-scale=1.0" />
    <title>Google Fonts Example</title>
    <style>
        @import
        url("https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap");

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

        h1 {
            font-family: "Lobster", cursive;
            color: green;
        }
    </style>
</head>

<body>
    <h1>Welcome to GeeksForGeeks</h1>
    <p>
        This paragraph uses Roboto, and the
         heading uses Lobster from Google
        Fonts.
    </p>
</body>

</html>

Output:

How to Determine if a value is Regular Expression using Lodash?

ghuleyogesh

Improve

Article Tags :

How To Add Font In CSS?

Prerequisites

Using web-safe fonts

Importing fonts from Google Fonts or other CDN-based font providers

Similar Reads

Thank You!

What kind of Experience do you want to share?