CSS Only Crossbrowser BulletProof @font-face danilomatos Follow 2010-09-03 03:58:24 License: GPLv3 License Fork0 Fav0 View526 Remember that the value "your_font" is the URL where you saved your font files. Generate your files here http://www.fontsquirrel.com/fontface/generator Play Stop Reload Fullscreen Smart Phone Readme JavaScript 1 lines HTML 1 lines CSS 18 lines Remember that the value "your_font" is the URL where you saved your font files. Generate your files here http://www.fontsquirrel.com/fontface/generator CSS Only Crossbrowser BulletProof @font-face document.write('<p>Hello, World!</p>'); <canvas id='world'></canvas> CSS Only Crossbrowser BulletProof @font-face body { background-color: #DDDDDD; font: 30px sans-serif; } /* CSS Only Crossbrowser BulletProof @font-face */ @font-face { font-family: 'your_font'; src: url('/fonts/your_font.eot'); src: local('☺'), url('/fonts/your_font.woff') format('woff'), url('/fonts/your_font.ttf') format('truetype'), url('/fonts/your_font.svg#webfont') format('svg'); font-weight: normal; font-style: normal; } /* Using your family */ h1 { font: 24px/1 your_font, Verdana, sans-serif; } Remember that the value "your_font" is the URL where you saved your font files. Generate your files here http://www.fontsquirrel.com/fontface/generator document.write('<p>Hello, World!</p>'); <canvas id='world'></canvas> body { background-color: #DDDDDD; font: 30px sans-serif; } /* CSS Only Crossbrowser BulletProof @font-face */ @font-face { font-family: 'your_font'; src: url('/fonts/your_font.eot'); src: local('☺'), url('/fonts/your_font.woff') format('woff'), url('/fonts/your_font.ttf') format('truetype'), url('/fonts/your_font.svg#webfont') format('svg'); font-weight: normal; font-style: normal; } /* Using your family */ h1 { font: 24px/1 your_font, Verdana, sans-serif; } use an iframe compat browser, deer Tweet QR code Embed Design view Code view <script type="text/javascript" src="http://jsdo.it/blogparts/dkmR/js?view=design"></script><p class="ttlBpJsdoit" style="width: 465px; margin: 0; text-align: right; font-size: 11px;"><a href="http://jsdo.it/danilomatos/dkmR" title="CSS Only Crossbrowser BulletProof @font-face">CSS Only Crossbrowser BulletProof @font-face - jsdo.it - share JavaScript, HTML5 and CSS</a></p> zip tags crossbrowser css fonts Tweet twitter Tags crossbrowser css fonts
