Tired of using the same old standard fonts in all your web pages? 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 web page to be notable and declare a truly unique entity. Use the below typography tutorial to make your website unique today!
@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 the major browsers, Chrome, Firefox, Safari, and Internet Explorer now support @font-face, which has lead to a proliferation of new stylistic options without resorting to images for fancy fonts.
{NOTE: This will also help your search engine optimization since the text will be legible by the search engines. This is even more important if the fancy font’s 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 available that have sprung up in recent years. Many users enjoy the sites Font Squirrel and Fontex, but Google has also joined in the free font’s 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’re using one a font titled “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 find it (“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, simple change the “h1” to say “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 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.
Conclusion
The @font face rule is useful, stylistic and easy to implement using CSS3. Designing a website has become more personalized than ever. Enjoy your new tool for independence and personalization!
By: Peter Marino
Peter Marino is the chief designer at reelWebDesign.com. He’s a proficient HTML5 web designer who matches design with the marketing direction of the individual or company who hires him. He can be reached at: peter@reelwebdesign.com. Peter is also for hire as a web design writer.