@font-face is a CSS rule which allows you to show a font on a Web page even if that font is not installed on the users' computer. This means that designers and developers can begin moving away from Web-safe fonts that users have pre-installed on their computer such as Arial, Times New Roman, Calibri (Body), Traditional Arabic etc.
Best part of @font-face is we used special font for our whole webpage and using @font-face means we can "do away" with hiding titles and using numerous time-consuming images per title and instead have a single font file on the server and also saved time and bandwidth.
font-family: "CustomFont", sans-serif;
There are some limitations with @font-face. Some old browser not support @font-face.