What are the different methods for implementing custom fonts in CSS?

There are several methods for implementing custom fonts in CSS, each with its own advantages and use cases. Here are the different methods:

1. **Using @font-face**:
   - The `@font-face` rule allows you to define custom font families and specify the sources from which the font files should be loaded. This method is widely used for importing custom fonts into CSS and provides flexibility in font usage and styling.

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

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

2. **Google Fonts**:
   - Google Fonts is a popular web font service that provides a vast collection of free and open-source fonts. You can import Google Fonts into your CSS using the `@import` rule or by linking to the Google Fonts stylesheet in your HTML document.

   ```css
   /* Using @import */
   @import url('https://fonts.googleapis.com/css2?family=Open+Sans&display=swap');

   /* Using link tag in HTML */
   <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Open+Sans&display=swap">
   ```

3. **Using font-display property**:
   - The `font-display` property allows you to specify how custom fonts should be displayed while they are loading. You can use values like `auto`, `swap`, `fallback`, or `optional` to control font loading behavior and improve perceived performance.

   ```css
   @font-face {
       font-family: 'CustomFont';
       src: url('path/to/font.woff2') format('woff2'),
            url('path/to/font.woff') format('woff');
       font-display: swap; /* Use fallback font until custom font is loaded */
   }
   ```

4. **Local Font Files**:
   - You can use local font files stored on the user's device or within the website's directory structure. Specify the file paths in the `@font-face` rule to import local font files into CSS.

   ```css
   @font-face {
       font-family: 'CustomFont';
       src: url('path/to/local/font.woff2') format('woff2'),
            url('path/to/local/font.woff') format('woff');
   }

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

5. **Fallback Font Families**:
   - Specify fallback font families in your CSS declarations to ensure that text remains readable if the custom font fails to load. Use generic font families like `serif`, `sans-serif`, or `monospace` as fallback options.

   ```css
   body {
       font-family: 'CustomFont', Arial, sans-serif;
   }
   ```

Each method for implementing custom fonts in CSS offers different levels of flexibility, performance, and compatibility. Choose the method that best fits your project requirements and design preferences.