This is part 5 in a series of posts about CSS3 and the advances it will make to our browsing experience. My last post discussed box shadows. In this post I’ll be discussing the @font-face-Attribute.
I can hear the angels rejoice because of this nifty and soon-to-be resourceful property. With the @font-face-Attribute, you can use any font you wish allowing you to step away from system fonts and relying on graphics, sIFR or Cufón to display the fonts you want to use.
In this example we will be using the font MankSans-Medium.ttf. The syntax to use this is:
@font-face {
font-family: 'MankSans-Medium';
src: url('MankSans-Medium.ttf') format('truetype');
}
After you make the above declaration you can call up the font using the normal style.
body {
font-family: "MankSans-Medium", Verdana, Arial, Helvetica, sans-serif;
}
If the client’s browser doesn’t support the @font-face attribute, it will degrade to the next available font. My suggestion would be to test your custom font in browsers that you know do not support this style attribute to see if it compromises your design. The client does not need to have the font locally since the font is installed on the server. Think of it as downloading an image, only the client will be downloading a font type.
The operating system does not play a factor with this new style, only browser compatibility.
Browser support: @font-face is supported by Safari 3.1+. Internet Explorer supports it if EOT fonts are used. Still waiting on Opera 10 and Firefox 3.5.
CSS3 will allow us to be more productive and our code to be more lightweight. As we keep in mind that some properties are not widely supported, we should still experiment with them to give our visitors an updated experience as to where the Web is taking us.
There are many more features and enhancements in CSS3. You can visit this site for more information.
Tags: cascading style sheets, css3, custom font, structured markup, system fonts, website design
