How to use @font-face | Css

 @font-face {
  font-family: "NameYourRont";
  src: url("font-webfont.eot?") format("eot"),
    url("font-webfont.woff") format("woff"),
    url("font-webfont.ttf") format("truetype"),
    url("font-webfont.svg#svgFontName") format("svg");
}
 

AI Explanation

This CSS code defines a custom font called "NameYourFont" using the @font-face rule. The font files are provided in different formats to ensure compatibility across various browsers. 1. font-family: "NameYourFont"; - Specifies the name of the custom font family that will be used throughout the CSS. 2. src: - Specifies the source of the font files in different formats. 3. url("font-webfont.eot?") format("eot") - Provides the path to the Embedded OpenType (EOT) font file. This format is mainly used for Internet Explorer. 4. url("font-webfont.woff") format("woff") - Provides the path to the Web Open Font Format (WOFF) font file. This format is widely supported by modern browsers. 5. url("font-webfont.ttf") format("truetype") - Provides the path to the TrueType font file. This format is also supported by most browsers. 6. url("font-webfont.svg#svgFontName") format("svg") - Provides the path to the SVG font file with a reference to the specific font within the file. This format is useful for older versions of iOS and Safari browsers. By including these font files in different formats, the @font-face rule ensures that the custom font "NameYourFont" can be displayed correctly across various browsers and devices.