@font-face {Do you know what this is?
font-family: "FontinSansRegular";
src: url('fonts/fontinsans.eot');
src: local('?'), url('fonts/fontinsans.woff') format('woff'), url('fonts/fontinsans.ttf') format('truetype'), url('fonts/fontinsans.svg#webfontn8vXGJ0x') format('svg');
font-weight: normal;
font-style: normal;
}
It's the future.
Okay, maybe it's not quite that dramatic. However, it does represent a huge step forward in web design. It's a web font declaration in CSS.
Let's go back to the dark ages, when Internet Explorer and Netscape Navigator ruled the Internet. In those days, text online was rendered in whatever fonts you had on your system. Running Windows 95? You got Arial and Times New Roman. Running a Macintosh? Default fonts were Chicago and New York.
Then came CSS, Internet Explorer 3, and the core fonts for the Web project.
The core fonts project aimed to provide a set of fonts that would be widely downloaded and used, which was supposed to ensure that websites looked the same across platforms. The downside to this was that the fonts had to be present on the user's system, not just on the web server. Granted, due to Windows' near-complete domination of the computer market, the vast majority of people probably did have the fonts installed. With the new (partial) CSS implementation in IE 3, you could specify typefaces. Yes, that's a choir of angels you hear singing "Hallelujah".
It still wasn't perfect, not by a long shot. You were still limited to whatever fonts your users had on their systems. You could be reasonably sure, however, that the fonts included in the core package were going to be present for the vast majority of your users. I mean, I could design a page using Footlight MT Light, but it might fall back to Times New Roman on your system.
With the introduction of the @font-face declaration in CSS 2, you could finally reference fonts that weren't stored on the user's computer! In the example above, I'm telling the browser to grab the Fontin Sans file, which is stored in the subfolder fonts. On my server. Not your computer. As long as you're using a browser that's at least as new as Internet Explorer 4, you'll see Fontin Sans on this webpage.
"Wait!" you say. "It displayed your fancy-schmancy new font after a minute, but when it first loaded, [it was in Times New Roman/I couldn't see any of the text]! What gives?"
Yeah, that's the problem with using @font-face. Pingdom says that fontinsans.ttf is one of the last things to load, and it takes a comparatively long time to load on top of that. Until it loads, the page is in limbo. Different browsers handle this limbo time in different ways. Firefox and Opera temporarily fall back to the next font in the font stack. Safari completely hides the text (though not the underline on hyperlinks, interestingly enough; if you load that page in Safari, you can see random lines going across the screen). Internet Explorer, for me at least, takes so long to load the entire page that it renders in Fontin Sans when it finally displays.
When the page is finished loading, though, the typeface is so beautiful that it makes Michelangelo weep.
(Again, maybe not quite that dramatic.)
Want to learn more?
No comments:
Post a Comment