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

Code Example 1

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

Code Example 2

@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 3

@font-face {
  font-family: "Open Sans";
  src: url("/fonts/OpenSans-Regular-webfont.woff2") format("woff2"),
       url("/fonts/OpenSans-Regular-webfont.woff") format("woff");
}

Code Example 4

<link rel="stylesheet" href="<Font location>">

Code Example 5

/* Answer to: "add font to css" */

/*
  In the @font-face rule; first define a name for the font 
  (e.g. myFirstFont) and then point to the font file.

  Tip: Always use lowercase letters for the font URL. Uppercase
  letters can give unexpected results in IE.

  To use the font for an HTML element, refer to the name of the
  font (myFirstFont) through the font-family property:
*/

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

div {
  font-family: myFirstFont;
}

/*
  For more information, go to:
  https://www.w3schools.com/css/css3_fonts.asp
*/

Code Example 6

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

Learn ReactJs, React Native from akashmittal.com