Some time we faced problem related to font family on the user’s system. Which font family we used for webpage during development time, not works another system. Basically problem is that, that font not install on client system. This problem resolves by using @font-face rule of css.
@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.
Example:
@font-face {
font-family: "CustomFont";
src: url("http://www.example.com/fonts/example");
}
h2 {
font-family: "CustomFont", sans-serif;
}There are some limitations with @font-face. Some old browser not support @font-face.
Leave Comment