How to add fonts in CSS?

To add custom fonts to your web project using CSS, you can use the @font-face rule. This rule allows you to specify a font family and provide the font files (typically in various formats) for different browsers to use. Here are the steps to add fonts in CSS:

1. Obtain the Font Files:

First, you need the font files you want to use. These files typically come in different formats (e.g., .woff, .woff2, .ttf, .eot, .otf) to ensure cross-browser compatibility. You can obtain fonts from various sources, including Google Fonts, Adobe Fonts, or by purchasing commercial fonts.

2. Upload Font Files:

Upload the font files to your web server or hosting provider. Make sure they are accessible via URLs, as you’ll need to reference them in your CSS.

3. Define the @font-face Rule:

In your CSS file, define the @font-face rule for each font you want to use. Here’s an example:

@font-face {
  font-family: 'CustomFont';
  src: url('path-to-font/customfont.woff2') format('woff2'),
       url('path-to-font/customfont.woff') format('woff');
  /* Add more src formats if needed */
  font-weight: normal;
  font-style: normal;
}

• font-family: This is the name you will use to refer to the font in your CSS styles.
• src: Specify the paths to the font files in different formats. You can include multiple formats to ensure compatibility with various browsers.
• font-weight and font-style: You can specify these properties if your font has different weights or styles.

4. Use the Custom Font:

Once you’ve defined the @font-face rule, you can use the custom font in your CSS styles like this:

body {
font-family: ‘CustomFont’, sans-serif;
}

• Replace 'CustomFont' with the name you defined in the @font-face rule.
• Include a generic font family like sans-serif as a fallback in case the custom font fails to load.

5. Testing and Optimization:

Test your website across different browsers and devices to ensure that the custom font displays correctly. Also, consider optimizing font loading using techniques like font preloading and font-display properties to improve performance.

Remember to replace ‘path-to-font‘ with the actual URL or relative path to your font files. Additionally, check the licensing terms of the fonts you use to ensure compliance with copyright and licensing requirements.