The @font-face rule allows custom fonts to be loaded on a webpage. When you have not installed fonts in your computer but want to use, just include the font file on your web server, and defined the CSS @font-face rule in stylesheet.

There are different types of font format. They are TrueType Fonts (TTF), OpenType Fonts (OTF), Web Open Font Format (WOFF), Web Open Font Format (WOFF 2.0), SVG Fonts/Shapes, and Embedded OpenType Fonts (EOT). Example for use this CSS @font-face rule.

/* Define @fant-face in stylesheet */

@font-face {
  font-family: 'MyWebFont';
  src: url('myfont.woff2') format('woff2'),
       url('myfont.woff') format('woff'),
       url('myfont.ttf') format('truetype');
}
/* For Bold Text  */

@font-face {
  font-family: 'MyWebFont';
  src: url('myfont.woff2') format('woff2'),
       url('myfont.woff') format('woff'),
       url('myfont.ttf') format('truetype');
  font-weight: bold;
}

/* Best possible browser support*/

@font-face {
  font-family: 'MyWebFont';
  src: url('webfont.eot'); /* IE9 Compat Modes */
  src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('webfont.woff2') format('woff2'), /* Super Modern Browsers */
       url('webfont.woff') format('woff'), /* Pretty Modern Browsers */
       url('webfont.ttf')  format('truetype'), /* Safari, Android, iOS */
       url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}

First define this @font-face in the stylesheet, then use for styling to element like this:

body {
  font-family: 'MyWebFont', Fallback, sans-serif;
}