How to Add and Use Custom Fonts in Your Website with CSS

Here’s how to add an OTF font file and use it in CSS:

1. Upload the Font File:

• Upload your OTF font file to your web server in a folder accessible by your website. This folder is typically named something like “fonts” or “assets.”

2. Define the Font in CSS with @font-face:

• In your website’s CSS file, use the @font-face rule to define the custom font. Here’s the basic structure:

@font-face {
  font-family: "YourFontName"; /* Give your font a name */
  src: url("path/to/yourfont.otf") format("opentype"); /* Font file path and format */
}

• Replace "YourFontName" with a chosen name for your font (e.g., “MyFancyFont”).
• Update "path/to/yourfont.otf" with the actual path to your uploaded font file relative to your CSS file.

3. Using the Custom Font:

• Once defined with @font-face, you can use the font name ("YourFontName" in our example) in the font-family property of any element you want to style:

h1 {
  font-family: "YourFontName", Arial, sans-serif; /* Use your font, with fallbacks */
}

Additional Considerations:

• Font Formats for Wider Browser Support: While OTF is generally well-supported, consider including additional font formats like WOFF and TTF to ensure compatibility with older browsers. You can add multiple source options within the src property:

src: url("yourfont.woff2") format("woff2"), /* Modern browsers */
     url("yourfont.woff") format("woff"), /* Older browsers */
     url("yourfont.ttf") format("truetype"); /* Fallback */

• Font License: Make sure you have the proper license to use the OTF font file on your website, especially if it’s not a free font.

By following these steps, you can add your custom OTF font and style elements on your website using CSS. Remember to check browser compatibility for a smooth user experience.