Speaking of CSS3, are you tired of using the same old standard fonts on all your Web pages and videos? For too long now, basic fonts like Georgia, Verdana and Arial have ruled the day on most websites. More than ever, modern design aesthetics demand variety to allow your online creations to be notable and declare a truly unique entity.
@Font-Face
Until @font-face showed up in the CSS world, however, there simply wasn't a reliable method of including unique fonts that would be viewable through all different Web browsers. All of the major browsers - Chrome, Firefox, Safari and Internet Explorer - now support @font-face, which has led to a proliferation of new stylistic options without resorting to images for fancy fonts.
This, by the way, will also help your search engine optimization since the text will be legible by the search engines. This is even more important if the sophisticated fonts you want to use are being used for H1 headers as opposed to the old method of using images for fancy text headers.
Choosing a Font
The proprietary rights of font types actually made for one of the big stumbling blocks early on in the development of the @font-face approach. Simply put, not many open-source fonts cleared for Web use were available until recently.
If you're purchasing a font, you will need to make sure it comes with a Web license, otherwise you could be in violation of intellectual property rights. A simpler solution - especially if you're working on a budget - is to choose from the many free Web fonts that have sprung up in recent years. Many users enjoy the sites Fontsquirrel.com and Fontex.org, but Google has also joined in the free fonts game, offering a vast library of open-source fonts through a very easy to use platform.
Using @Font-Face
Now that you've selected your font, installing it into your CSS style sheet is remarkably easy. All you have to do is include a font-specific rule in your style sheet, referencing the files in a very similar manner as you would an image. This means that you will need to upload your font type to your server in order for your style sheet to access it (unless you are using Google Fonts, which will allow you to source the font directly from its library).
For this example, let's say we are using a font called Happy Monkey:
@font-face {
font-family: 'Happy Monkey', Arial, cursive;
src: url(/happymonkey.otf);
}
With this code you've told your style sheet about a font you'd like to use ("font-family"), and where it can be found ("src"). Here it's important to note that different browsers recognize different font types. All major browsers, however, recognize "OTF" and "TFF" font types, so you are best sticking to those two.
Now that you've told your style sheet about your font, you'll need to tell it how you'd like to use it. For example, if you'd like to use it as Heading 1, use this code:
h1 {
font-family: 'Happy Monkey', Arial, serif; font-weight: 400;
}
If you'd like the font for your body text, simply change the "h1" to "body." If you'd like to designate the font for all your text, insert something like this:
body, h1, h2, h3 {
font-family: 'Happy Monkey', Arial, serif; font-weight: 400;
}
Please note that's it's important to include default fonts so that your text will still appear in a manner acceptable to you. In the above code, if "Happy Monkey" failed to load, the font would have appeared as "Arial" instead.
About the author: Peter Marino is the Chief Designer and CMO of reelWebDesign.com, an HTML5 Web design and social media marketing company based in New York City.
