Handy if google fonts does not have your required font and you have the correct licence for showing it on your site... ;)

css

/* Include the font, you can call it whatever you like */
@font-face { 
font-family: 'MyAwesomeFontName';
url('path/to/font.ttf');
}
/* Use the font, also a good idea to include an alternative fallback if the font does not load */
.myelement {
	font-family: 'MyAwesomeFontName', sans-serif;
}

Embed an OTF font

@font-face {
    font-family: MyAwesomeFontName;
    src: url("path/MyAwesomeFontName.otf") format("opentype");
}