Web Fonts | Intermediate | Html Css Tutorial

Using web fonts in your designs

Web fonts allow you to use custom fonts on your web pages, providing more design flexibility and enhancing the visual appeal of your site. This tutorial covers how to use web fonts in your designs, including how to import fonts from popular services like Google Fonts.

Key Points:

Web fonts enable the use of custom fonts on web pages.
Popular web font services include Google Fonts and Adobe Fonts.
Web fonts enhance the design and readability of your content.

Introduction to Web Fonts

Web fonts are fonts that are hosted on the web and can be used by including a link or importing them into your CSS. This allows you to use fonts that are not installed on the user's computer. Popular web font services include Google Fonts, Adobe Fonts, and Font Squirrel.

Using Google Fonts

Google Fonts is a popular and free service that provides a large collection of web fonts. To use Google Fonts, follow these steps:

Go to the Google Fonts website.
Browse and select the fonts you want to use.
Copy the provided HTML link or import statement.

Here is an example of how to use Google Fonts:


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

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

Using Adobe Fonts

Adobe Fonts (formerly Typekit) is another popular service for web fonts. To use Adobe Fonts, follow these steps:

Go to the Adobe Fonts website.
Browse and select the fonts you want to use.
Copy the provided embed code.

Here is an example of how to use Adobe Fonts:


<!-- HTML -->
<head>
    <link rel="stylesheet" href="https://use.typekit.net/xyz123.css">
</head>

/* CSS */
body {
    font-family: 'AdobeFontName', sans-serif;
}

Using @font-face

The @font-face rule allows you to use custom fonts that are not available through services like Google Fonts or Adobe Fonts. You can host the fonts yourself and include them in your CSS. Here is an example:


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

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

Best Practices for Using Web Fonts

Here are some best practices for using web fonts:

Limit the number of web fonts: Using too many web fonts can slow down your site. Stick to 2-3 fonts to maintain good performance.
Use font-display: The font-display property can control how text is displayed while the web font is loading. For example, font-display: swap; will show fallback text until the web font loads.
Consider readability: Ensure that the fonts you choose are readable on all devices and screen sizes.
Test performance: Test the performance impact of your web fonts using tools like Google PageSpeed Insights.

Summary

In this tutorial, you learned how to use web fonts in your designs. You explored how to import fonts from Google Fonts and Adobe Fonts, as well as how to use the @font-face rule to include custom fonts. By following best practices, you can enhance the visual appeal of your web pages while maintaining good performance and readability.

HTML CSS - Web Fonts