Check out example codes for "font face". It will help you in understanding the concepts better.

Code Example 1

@font-face { font-family: 'meine-schrift';
             src: url('pfad/zu/meinerschrift.ttf') format('truetype'); }
@font-face { font-family: 'meine-schrift';
             src: url('pfad/zu/meiner-kursiven-schrift.ttf') format('truetype');
             font-style: italic; }
@font-face { font-family: 'meine-schrift';
             src: url('pfad/zu/meiner-fetten-schrift.ttf') format('truetype');
             font-weight: bold; }
@font-face { font-family: 'meine-schrift';
             src: url('pfad/zu/meiner-kursiv-fetten-schrift.ttf') format('truetype');
             font-weight: bold;
             font-style: italic; }

Code Example 2

@font-face {
  font-family: myFirstFont;
  src: url(sansation_light.woff);
}

Code Example 3

@font-face {
  // Defining what the font will be called
  font-family: thisSpecialFont;
  // Linking to the font file
  src: url(linkToFontFile.woff);
}
body {
  font-family: thisSpecialFont;
}

Code Example 4

@font-face {
    font-family: CustomFont;
    src: url('CustomFont.ttf');
}

@font-face {
    font-family: CustomFont2;
    src: url('CustomFont2.ttf');
}

Code Example 5

@font-face {
	font-family: Chunkfive;
	src: url('Chunkfive.otf');
}

Code Example 6

@font-face {
  font-family: myFirstFont;
  src: url(sansation_bold.woff);
  font-weight: bold;
}

Learn ReactJs, React Native from akashmittal.com