Custom Font

  font: italic small-caps 400 1.2rem/2 'Montserrat', sans-serif;

the order will be as below:

  /* 
    font: font-style font-variant font-weight font-size/line-height font-family;  
  */

• font-size and font-family should be there in the short-hand

Generic Families & Font Families

Font Display

	Block Period	Swap Period	Outcome
block	short	infinite	FOIT, Layout shifts
swap	none	infinite	FOUT, Layout shifts
fallback	extremely short	short	Minimize the risk of layout shift & invisible texts
optional	extremely short	none	Minimize the risk of layout shift & invisible texts(even better than fallback, as no swap period)
auto	based on user agent	based on user agent	based on user agent

1. Controlling Font Performance with font-display
2. Font loading strategies: FOIT and FOUT
   • FOIT - Flash Of Invisible Text
   • FOUT - Flash Of Unstyled Text
3. Optimize web fonts loading - YouTube

@font-face {
  font-family: 'Belta bold';
  src: url('../fonts/belta-bold-cufonfonts/belta-regular.ttf');
  src: url('../fonts/belta-bold-cufonfonts/belta-regular.woff2') format('woff2'),
       url('../fonts/belta-bold-cufonfonts/belta-regular.woff') format('woff'),
       url('../fonts/belta-bold-cufonfonts/belta-regular.otf') format('opentype'),
       url('../fonts/belta-bold-cufonfonts/belta-regular.ttf') format('truetype'),
       url('../fonts/belta-bold-cufonfonts/belta-regular.eot') format('embedded-opentype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Belta bold';
  src: url('../fonts/belta-bold-cufonfonts/belta-light.ttf');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Belta bold';
  src: url('../fonts/belta-bold-cufonfonts/belta-bold.ttf');
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}

Summary