How to Get Custom Fonts in HTML?

Last Updated : 15 Oct, 2024

Using custom fonts in HTML can make your web pages look more unique and visually appealing. It helps improve the overall design and user experience by adding a personal touch to your site.

These are the following approaches to get the custom Fonts in HTML:

Table of Content

Using Google Fonts
Using @font-face in CSS
Using External Font Services

Using Google Fonts

Google Fonts is a free and popular library of web fonts that you can easily add to your website. We will go to Google Fonts, browse through the fonts, and choose one you like. Copy the <link> tag provided by Google Fonts and paste it in the <head> section of your HTML file. Set the font-family property in your CSS to apply the new font to your text.

Example: This example shows how to apply a custom font using Google Fonts.

HTML

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content=
"width=device-width, initial-scale=1.0">
    <title>Using Google Fonts</title>
    <!-- Linking Google Font -->
    <link href=
"https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">
    <style>
        h2,
        p {
            font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande',
                          'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
        }
    </style>
</head>

<body>
    <h1>Without Using Font</h1>
    <h2>Using Custom Google Font - Roboto</h2>
    <p>
        This paragraph uses the 'Roboto'
        font from Google Fonts
    </p>
</body>

</html>

Output:

Using @font-face in CSS

The @font-face rule allows you to add custom fonts to your website by using a font file (like .ttf, .woff, or .otf) that is stored locally or on a server. This method gives you more control over how the font is used on your site. Download the font file you want to use and save it in your project folder.then use the @font-face rule to set up the font name and specify the path to the font file. then use the defined font in your CSS by setting the font-family property.

Syntax:

@font-face {
    font-family: 'CustomFont';
    src: url('fonts/CustomFont.woff2') format('woff2'),
         url('fonts/CustomFont.woff') format('woff');
}

Example: This example demonstrates how to use a custom font file.

HTML

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content=
"width=device-width, initial-scale=1.0">
    <title>Using @font-face</title>
    <style>
        @font-face {
            font-family: 'OpenSans';
            src: url('fonts/OpenSans-Regular.woff2') format('woff2'),
                 url('fonts/OpenSans-Regular.woff') format('woff');
        }

        body {
            font-family: 'OpenSans', sans-serif;
        }
    </style>
</head>

<body>
    <h1>Using Custom Font with @font-face</h1>
    <p>
        This paragraph uses the 'OpenSans'
        font loaded using @font-face.
    </p>
</body>

</html>

Output:

Using External Font Services

In addition to Google Fonts, you can use other font services like Adobe Fonts (formerly Typekit), Font Squirrel, and Fonts.com to get a variety of custom fonts for your website. Register for an account with the font service you want to use. Browse and select a font, then get the embed code provided by the service. then place the embed code in the <head> section of your HTML file. then use the font-family CSS property to style your text with the selected font.

Example: This example shows how to use Adobe Fonts in an HTML document.

HTML

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content=
"width=device-width, initial-scale=1.0">
    <title>Using Adobe Fonts</title>
    <!-- Adobe Fonts Embed Code -->
    <link rel="stylesheet"
          href="https://use.typekit.net/your-kit-id.css">
    <style>
        body {
            font-family: 'YourFontName', sans-serif;
        }
    </style>
</head>

<body>
    <h1>GeeksforGeeks</h1>
    <h3>Using Adobe Fonts</h3>
    <p>This paragraph uses a custom font from Adobe Fonts.</p>
</body>

</html>

Output:

Conclusion

Adding custom fonts in HTML lets you customize the appearance of your website to align with your brand. Whether you choose Google Fonts, @font-face, or an external font service, each method allows you to bring unique and stylish typography to your web project. Understanding the differences helps you pick the right approach for achieving your desired look and feel.

pankaj2025

Improve

Article Tags :

HTML

How to Get Custom Fonts in HTML?

Using Google Fonts

Using @font-face in CSS

Syntax:

Using External Font Services

Conclusion

Similar Reads

Thank You!

What kind of Experience do you want to share?