CSS

css font face

@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;
}

font face css

@font-face {
font-family: 'PacificoRegular';
src: url('Pacifico-webfont.eot');
src: url('Pacifico-webfont.eot?#iefix') format('embedded-opentype'),
url('Pacifico-webfont.woff') format('woff'),
url('Pacifico-webfont.ttf') format('truetype'),
url('Pacifico-webfont.svg#PacificoRegular') format('svg');
font-weight: normal;
font-style: normal;
}

css fontface

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

How to use a fontface in CSS

The following syntax is how you use @font-face. First, you define the new font by providing it a name and stating where the font can be found.

@font-face {
    font-family: DeliciousRoman;
    src: url('https://www.font-face.com/fonts/delicious/Delicious-Roman.otf');
}

And then you refenence it.

p {
    font-family: DeliciousRoman, Helvetica, Arial, sans-serif;
}

that's it.