Where to find fonts:

fontsquirrel.com fonts.com myfonts.com

To embed webb fonts, the format of the font has to be in woff or woff2 format as they are more compressed, therefore we need to convert it to the correct format before we use them.

webfont generator

Create a folder under your css file named fonts/YOUR_FONT_NAME

Drag all woff or woff2 fonts inside that folder

On the top of your main stylesheet, add reference, making sure to provide correct URL

Ex:

/* regular font */
@font-face {
  font-family: "opensans";
  src: url("fonts/open-sans/opensans-regular-webfont.woff2") format("woff2"),
			 url("fonts/open-sans/opensans-regular-webfont.woff") format("woff");
  font-weight: normal;
  font-style: normal;
}

/* bold font */
@font-face {
  font-family: "opensans";
  src: url("fonts/open-sans/opensans-bold-webfont.woff2") format("woff2"),
			 url("fonts/open-sans/opensans-bold-webfont.woff") format("woff");
  font-weight: bold;
  font-style: normal;
}