Pages: [1]   Go Down
Send this topic | Print
Author Topic: Embedded Fonts in HTML - are you sick of web safe fonts?  (Read 248 times)
0 Members and 1 Guest are viewing this topic.
robertwatcher
Alternative Viewpoint
Administrator
Hero Member
*****
Offline Offline

Gender: Male
Posts: 774


Alternative Viewpoint


WWW
« on: February 04, 2010, 09:20:01 AM »

It was kind of exciting to find out that - contrary to popular belief, it is a relatively simple task to make use of fonts other than the recommended web safe ones - - -in the design of an html based website.

One of the advantages of flash websites, has always been their ability to display fonts other than Arial, Verdana, etc - as a result of the custom fonts being embedded into the flash application. With HTML, we can define whatever font we want in our css markup - but unless it happens that viewer of your website has that/those font/s installed on their computer - they won't see it.

With  @Font-Face Embedding being part of the CSS3 definition, we are able to provide the same font experience to our viewers, that they would experience with embedded fonts in a flash website. How is this done? The font is uploaded to your server, and then specific code that includes the path to the font, is included in your style sheet.

There are some quirks - especially involving Internet Explorer's proprietary format requirements - - - but they can all be worked around. here is an excellent article with all of the solutions needed to get nice looking fonts on your website:

http://randsco.com/index.php/2009/07/04/p680


Quote
Conclusions

Because FireFox 3.5+ supports the CSS3 @font-face selector, cross-browser font embedding is now both possible and practical. The effect this will have on the web should be dramatic, replacing a decade-old typographic wasteland with a tastier and richer diversity of fonts.

While cross-browser deployment isn't ideal, the benefits of utilizing CSS to embed fonts is obvious: It's lightweight; it's valid CSS (CSS3); it's easy to do; it's search engine friendly; it's cross-browser compatible; and (yay) it relies neither on either JavaScript or Flash. The only downside is the slight overhead in downloading font file(s) and - depending on browser settings Defeating Font Embedding Internet Explorer In Internet Explorer 8, users may elect to disable font downloading or they may ask to be prompted, resulting in a message similar to the one below. (I believe, by default, this is set to "enable", so visitors would have to explicitly re-set the value and the majority won't). ie font embedding message To reset in IE8: Tools > Internet Options > Security Tab > Custom Level > Downloads Section > Font Download (last one in the section). FireFox In FireFox, users can elect to replace all web fonts with fonts of their choosing. (This is defeated, by default and again, it would be up to users to explicitly re-set this value and the majority won't). To reset in FFx: Tools > Options > Content Tab > Fonts & Colors (Advanced Tab) > un-tick "Allow pages to choose their own fonts, instead of my selections above").   - may not render even for those browsers that support it. No worries! The technique degrades nicely to the normal "web-safe" or generic fonts you specify.



----- 
« Last Edit: February 04, 2010, 09:25:55 AM by robertwatcher » Logged

Rob

A Creative Edge in Photography by Robert Watcher
www.robertwatcher.com

Contact me at robertwatcher@hotmail.com
Pages: [1]   Go Up
Send this topic | Print
Jump to:  

Little Buddy and the Voice of Reason by Timothy M Watcher

LB by timothy michael watcher is a weekly comic strip that explores the consequences of having the mind of timothy michael watcher