There are a few reasons why smiley is a better solution:
Webkit+Font Management software can mess up local references, like turning glyphs into A blocks. (crbug.com/33173)
On OS X, Font Management software may alter system settings to show a dialog when trying to access a local() font that's accessible outside of Library/Fonts. More detail on my bulletproof post. (crbug.com/29729) Font Explorer X is also known to mess up other stuff in Firefox: bugzil.la/531771
Although it's unlikely, you could reference a local() font which is completely different than what you think it is. (Typophile post on different fonts, same name) At the very least its a risk, and you're ceding control of the type to both the browser and host machine. This risk may not be worth the benefit of avoiding the font download.
These are all pretty edge case issues, but it's worth considering. FontSquirrel has already made the smiley syntax the new default in the Generator, and you should use it going forward as well.
Group items tagged
@font-face gotchas « Paul Irish - 1 views
-
-
And.. regarding @font-face syntax I now recommend the bulletproof smiley variation over the original bulletproof syntax.
-
@font-face { font-family: 'Graublau Web'; src: url('GraublauWeb.eot'); src: local('?'), url('GraublauWeb.woff') format('woff'), url('GraublauWeb.ttf') format('truetype'); }
- ...5 more annotations...
-
"There are a few reasons why smiley is a better solution: Webkit+Font Management software can mess up local references, like turning glyphs into A blocks. (crbug.com/33173) On OS X, Font Management software may alter system settings to show a dialog when trying to access a local() font that's accessible outside of Library/Fonts. More detail on my bulletproof post. (crbug.com/29729) Font Explorer X is also known to mess up other stuff in Firefox: bugzil.la/531771 Although it's unlikely, you could reference a local() font which is completely different than what you think it is. (Typophile post on different fonts, same name) At the very least its a risk, and you're ceding control of the type to both the browser and host machine. This risk may not be worth the benefit of avoiding the font download. These are all pretty edge case issues, but it's worth considering. FontSquirrel has already made the smiley syntax the new default in the Generator, and you should use it going forward as well. "
Font Squirrel | Create Your Own @font-face Kits - 0 views
-
Useful when you want to embed fonts into your page and have to deal with browser compatibility issues
Web Designer Notebook » How to use Modernizr - 1 views
-
Modernizr doesn’t actually magically enable these properties for browsers that don’t support them. It just tells the page whether that feature is supported on the browser the visitor is using or not.
-
To install Modernizr, download the file from this page. Then, on your site’s head tag, add a link to the file. For example: ?1<script src="js/modernizr-1.0.min.js"></script> The second step is to include on your html tag a class of “no-js”: ?1<html class="no-js"> Why add this tag? Because that will be the default state of the page. If JavaScript (js) isn’t on, then Modernizr won’t work at all (and probably other features of your site won’t work either…), so it’s good that we have a fallback for that case. If JavaScript is indeed enabled, once that page is loaded on the browser, that class will be replaced dynamically and it may look something like this: ?1<html class="js canvas canvastext geolocation rgba hsla no-multiplebgs borderimage borderradius boxshadow opacity no-cssanimations csscolumns no-cssgradients no-cssreflections csstransforms no-csstransforms3d no-csstransitions video audio cufon-active fontface cufon-ready">
-
"There is a tool that came to make our lives as progressive web designers a bit easier: Modernizr. In this short tutorial, learn how to apply this handy script to maximum effect on your sites."
1 - 4 of 4
Showing 20▼ items per page