Using The @font-face Rule

How to include a custom font in a CSS file.

  1. Download or Create the Font Files

    Download or create the custom font you want to use and make sure it is in a web-friendly format, such as TrueType (.ttf), OpenType (.otf), or Web Open Font Format (.woff or .woff2).

  2. Upload the Font Files

    Upload the font files to your website's server resource directory.

  3. Include the @font-face Rule in Your CSS File

    @font-face {
      font-family: 'YourCustomFontName';
      src: url('path/to/your/font.woff2') format('woff2'),
           url('path/to/your/font.woff')  format('woff'),
           url('path/to/your/font.ttf')   format('truetype');
    }

    Replace 'YourCustomFontName' with the desired font-family name and adjust the src property to point to the correct path for your font files.