By /

CSS @font-face Property

The CSS @font-face rule is a powerful tool that allows you to embed custom fonts on your web pages. This means you can use fonts that are not installed on the user’s computer, ensuring that your website’s typography looks consistent across different devices and platforms.

  • Purpose:

    • To embed custom fonts on a webpage.
    • To use fonts that are not installed on the user’s system.
    • To enhance the visual appeal and branding of a website.

  • Example:

@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');
   font-weight: normal; /* or bold, 100, 200, etc. */
   font-style: normal; /* or italic */
   font-display: swap; /* or auto, block, fallback, optional */
}

Explanation of Properties:

  • font-family:
    • Specifies the name you will use to refer to the font in your CSS.
      Choose a descriptive and unique name.
  • src:
    • Defines the location of your font files.
    • You can specify multiple font formats (e.g., WOFF2, WOFF, TTF) to ensure compatibility across different browsers.
    • format(): Helps the browser understand what type of font is being loaded.
  • font-weight:
    • Specifies the weight of the font (e.g., normal, bold, 100, 200, …, 900).
  • font-style:
    • Specifies the style of the font (e.g., normal, italic, oblique).
  • font-display:
    • Controls how the font is displayed while it’s loading.
    • swap: Text is displayed in a fallback font until the custom font is loaded, then it’s swapped.
    • block: A short invisible block period. If the font doesn’t load during this period, the fallback font is used.
    • fallback: Very short invisible block period. Very short swap period.
    • optional: The browser decides whether or not the font is downloaded.
    • auto: The browser uses its default font-display strategy.

  • Example Usage:

@font-face {
   font-family: 'MyCustomFont';
   src: url('fonts/MyCustomFont-Regular.woff2') format('woff2'),
   url('fonts/MyCustomFont-Regular.woff') format('woff');
   font-weight: normal;
   font-style: normal;
   font-display: swap;
}

h1{
   font-family:'MyCustomFont',sabs-serif;
}

p{
  font-family:'MyCustomFont',serif;
}

Important Considerations:

  • Font Formats:
    • Use modern font formats like WOFF2 for optimal performance and browser compatibility.
    • Provide fallback formats like WOFF and TTF for older browsers.
  • Font Licensing:
    • Ensure you have the necessary licenses to use the fonts on your website.
  • Font Optimization:
    • Optimize your font files to reduce their size and improve loading times.
    • Use font subsets to include only the characters you need.
  • Font Hosting:
    • You can host your fonts on your own server or use a font hosting service like Google Fonts or Adobe Fonts.
    • Performance: Loading many large font files can slow down your site. Try to keep the amount of custom fonts to a minimum.
Scroll to Top