Web typography is evolving. Today, we have something called Web Fonts, which are typefaces that don’t require installation on a user’s computer to display text on a web page. Perhaps a browser update affecting its @font-face support? You can check the status for popular browsers at caniuse.com.
Explore Bulletproof @font-face Syntax by Paul Irish.
A tool, fontcustom, converts SVG files into custom fonts using these rules:
@font-face {
font-family: "fontcustom";
src: url("fontcustom.eot");
src:
url("fontcustom.eot?#iefix") format("embedded-opentype"),
url("fontcustom.woff") format("woff"),
url("fontcustom.ttf") format("truetype"),
url("fontcustom.svg#fontcustom") format("svg");
font-weight: normal;
font-style: normal;
}
@media screen and (-webkit-min-device-pixel-ratio: 0) {
@font-face {
font-family: "fontcustom";
src: url("fontcustom.svg#fontcustom") format("svg");
}
}Different browsers support distinct font file formats:
- eot: exclusively Internet Explorer, starting from version 6
- ttf: universally accepted except in Internet Explorer from version 9 (provided it’s installable)
- woff: widely supported across browsers including IE from version 9
The SVG format is crucial for mobile browsers, especially Webkit-based ones.
Therefore, employing src: url("fontcustom.woff") format("woff"); ensures font availability in recent and modern desktop browsers.