A webfont is a special font format with a specific license that allows everyone to use real typography online (websites), without losing the advantages of dynamic, searchable, accessible content live text.
A webfont comes in four formats, each one designed to target a different browser: a TrueType file, a WOFF file, a EOT file and a SVG file. You will need all four when using webfonts to build a website.
@font-face is the CSS declaration that web designers and programmers use to specify a webfont. The webfont files can be loaded from either a directory on your host server (as static resources), or it could be hosted by a specialist third party service provider.