Typography

A web-safe font is a font that comes standard across platforms. These include fonts like Times New Roman and Georgia in the serif family, and Arial, Calibri, and Verdana in the sans-serif family. They are considered web-safe because the majority of people have them installed by default on their computers.

There is much debate on whether or not web-safe fonts are still relevant, given the emerging technologies. However, the answer is at best in the gray area. For an explanation of why, see this website for the likelihood of different fonts being installed in various platforms: http://www.speaking-in-styles.com/web-typography/Web-Safe-Fonts/. For more information about what fonts are considered web-safe, see this site: http://www.ampsoft.net/webdesign-l/WindowsMacFonts.html

With today’s CSS advances, however, designers are no longer limited to these five or so font families. The first that comes to mind is the @font-face property. This allows you to embed fonts directly in your site and stylesheet, so that it’s literally loaded with the page. I used this in a website I did: Livingsabai.com (it’s on the left navigation menu). Pretty cool, eh? Another option is Google fonts. This is very easy to use. You simply add the font in your stylesheet, and then plugin the HTML code Google fonts gives you. Easy as 1..2..3. I haven’t used this one, but here is a blog that describes how to do it: http://techably.com/2011/11/use-google-web-fonts/. A third alternative is cufon fonts. The way this works is you supply your font file to a cufon javascript rendering engine, which converts your font to a vector graphic. Then, the HTML5 canvas element is used to display the font in most browsers (while Vector Markup Language is used to display it in IE). An example of this is: http://www.instituteforconflictresolution.com/. The cufon font is the text on the gray bar in the middle of the page.

The advantage of embedded fonts of any kind is that they remain as text that search engines can parse. That’s very important, and avoids having to use images and then enter alt or title text.

To use the @font-face property, you first have to get your font files. You will need at least a .ttf and an .eot file (for cross-browser compatibility). You can use http://www.fontsquirrel.com/fontface/generator to do that. Next, you will need to upload the font files to a folder on your site root. I normally use images/fonts. Next, you need to plugin the code on your stylesheet, like so:

@font-face {
font-family: ‘SanvitoProBold’;
src: url(‘images/fonts/sanvitopro-bold-webfont.eot’);
src: url(‘images/fonts/sanvitopro-bold-webfont.eot?#iefix’) format(’embedded-opentype’),
url(‘images/fonts/sanvitopro-bold-webfont.woff’) format(‘woff’),
url(‘images/fonts/sanvitopro-bold-webfont.ttf’) format(‘truetype’),
url(‘images/fonts/sanvitopro-bold-webfont.svg#SanvitoProBold’) format(‘svg’);
font-weight: normal;
font-style: normal;
}

And for the element you want styled:

#sidebar_left ul li a{
color:#7B2B83; text-decoration:none;
display:block; padding:0;
font-family: SanvitoProBold, serif;
font-size: 1.4em;
}

And voila! It should work….

Some pros of using @font-face are that it’s easy and straightforward, without having to use any scripts or extra <link> tags in your html, and you can use any font that can be converted. Some cons are that IE has to have its own format – .eot – which is typical of Microsoft products, you have to be careful not to illegally use copyrighted fonts, and it may not work on some older browsers. However, it is supposed to work on all later versions than Safari 3.1, Opera 10, IE 4, Firefox 3.5, and Chrome 4.0. So, you should be fine there.

Advertisements

About NickAndrea19

My goal has always been and continues to be the liberation of minds, my own and what influence I may have on others, to perceive the extraordinary beauty all around us. To this end, I write, play music, and design websites. Don't hesitate to contact me for more information about any of these activities. :)
This entry was posted in Tech. Bookmark the permalink.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s