This page is a demonstration of a few @font-face syntax techniques, most notably from bulletproof @font-face syntax and Mo’ Bulletproofer @Font-Face CSS Syntax.

original bulletproof syntax

@font-face { font-family: bulletproof; src: url('fonts/yanone.eot'); src: local('Yanone'), url(fonts/yanone.ttf) format("truetype"); }

bulletproof with no quotes around local name

@font-face { font-family: bulletproofnoquotes; src: url('fonts/yanone.eot'); src: local(Yanone), url('fonts/yanone.ttf') format("truetype"); }

mo bullet proofer

@font-face{ font-family:mobulletproofer; src:url(fonts/yanone.eot); } @font-face { font-family:mobulletproofer; src:url(//:) format("No-IE-404"),url(fonts/yanone.ttf) format("truetype"); }

no quotes on url

@font-face { font-family: bulletproofnoquotes2; src: url('fonts/yanone.eot'); src: local('Yanone'), url(fonts/yanone.ttf) format("truetype"); }

no format property, no quotes around either url

@font-face { font-family: noformat; src: url(fonts/yanone.eot); src: local('Yanone'), url(fonts/yanone.ttf); }

locally installed with local font name

@font-face { font-family: localref; src: url(fonts/yanone.eot); src: local('Yanone Tagesschrift'), local('Yanone'), local('Yanone Tagesschrift'), url(fonts/nottherealpath.ttf) format('tuetype'); }

basic with missing local quotes (no eot)

@font-face { font-family: basic; src: local(Yanone), url('fonts/yanone.ttf') format("truetype"); }

only the eot

@font-face { font-family: onlyeot; src: url('fonts/yanone.eot'); }

bulletproof with smileyface as local name

@font-face { font-family: bulletproofsmiley; src: url('fonts/yanone.eot'); src: local('☺'), url('fonts/yanone.ttf') format("truetype"); }