3.1 Web Fonts
Connecting fonts on web pages plays a key role in creating a unique and appealing design. Web fonts allow you to use fonts that aren't installed on the user's computer by loading them from a server. Google Fonts is one of the most popular services for using web fonts. Let's dive into how to connect web fonts and Google Fonts on web pages.
Web Fonts are fonts that are loaded from a remote server and displayed on a web page, even if they are not installed on the user's device. This provides more flexibility in font selection and allows for more appealing design.
Connecting web fonts
Example of connecting web fonts using @font-face:
First, load the font files onto your server. Typically, these are files in .woff, .woff2, .ttf, .eot, and .svg formats.
Step 2. Using @font-face in CSS:
@font-face {
font-family: 'MyCustomFont';
src: url('fonts/MyCustomFont.woff2') format('woff2'),
url('fonts/MyCustomFont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
body {
font-family: 'MyCustomFont', sans-serif;
}
Advantages of using @font-face:
- Control: full control over the selection and use of fonts
- Compatibility: support for various font formats to ensure compatibility with different browsers
- WOFF (Web Open Font Format): a widely supported format for web fonts
- WOFF2: an improved version of WOFF with better compression
- TTF (TrueType Font): a standard format for fonts supported by most browsers
- EOT (Embedded OpenType): a format supported by Internet Explorer
- SVG: format for using fonts in SVG graphics
3.2 Google Fonts
Google Fonts provides a collection of free fonts that can be easily integrated into your website. The advantage of using Google Fonts is the ease of connection and the variety of available fonts.
Connecting fonts using Google Fonts:
1. Choosing a font on the Google Fonts site:
Go to Google Fonts and choose the font you want to use.
2. Obtaining a link for connection:
On the selected font's page, choose the styles and weights you need. Google Fonts will then generate a link for font connection.
3. Insert the link in the HTML document:
Copy the generated link and paste it into the <head> section of your HTML document.
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">
1. Applying the font in CSS:
Use the font-family property to apply the font to elements on the page.
body {
font-family: 'Roboto', sans-serif;
}
h1 {
font-family: 'Roboto', sans-serif;
font-weight: 700;
}
Example of using Google Fonts through HTML:
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Google Fonts</title>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">
<style>
body {
font-family: 'Roboto', sans-serif;
}
</style>
</head>
<body>
<p>This text is displayed using the Roboto font.</p>
</body>
</html>
3.3 Using CSS @import
Google Fonts can also be connected using the @import rule in CSS.
Example of using Google Fonts through @import:
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');
body {
font-family: 'Roboto', sans-serif;
}
Advantages of using Google Fonts:
- Ease of use: easily integrate fonts with a single line of code
- Wide selection: access to a large number of fonts in various styles and categories
- Performance optimization: fonts are loaded from Google's high-performance servers
The display="swap" attribute in the code for connecting Google Fonts web fonts improves performance and user experience. When you connect web fonts, the browser must first load and display the font before it can display the text. This can cause delays, especially with slow internet. display="swap" solves this issue by telling the browser to use the default system font while the web font loads. Once the web font is loaded, the browser swaps it in.
Impact on performance:
When using web fonts, it's important to consider their impact on the webpage's performance. Loading a large number of fonts or styles can increase page load time. To minimize this impact, follow these recommendations:
- Use the minimal necessary number of styles: choose only the styles you really need
- Use the
display="swap"attribute: this ensures the text is displayed with a system font while the web font loads, improving user-perceived performance - Optimize font delivery: use caching and preload to improve performance
GO TO FULL VERSION