Check out example codes for "css how to embed fonts". It will help you in understanding the concepts better.

Code Example 1

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

div {
  font-family: myFirstFont;
/*Name the font-family and link the font file in the @font-face rule*/

Code Example 2

@import url(//;
/*When not hosting on my own server use the @import rule which is Google Fonts Versionn and hosted on their server*/

Code Example 3

/************* How to embed fonts using GOOGLE FONTS? ******************
This will ensure that the Font type of your choice will appear for all 
users, regardless of whether or not they have this Font installed!

1º -  Go to

2º - Choose a Font and, for that particular choice, you mark the option: 
     "Select this style". Do this for every Font you wish to incorporate

3º - In the page of your "Selected Family", go to the option "Embed"

4º - Copy the link and paste in the <header> of your html file: */
<link href="" 
  rel="stylesheet"> /*

5º - Finish by copying the "CSS rules to specify families" that the site 
gives you and (in your css file) pasting a new property to your element, 
for exemple: */

h1 {
  font-family: "Sacramento", cursive;

Learn ReactJs, React Native from