Embedding fonts with CSS for your next HTML5 application (mobile)
These days more and more people are using HTML5 and CSS3 to create some amazing applications. If your using a tool like PhoneGap you might want to embed a font for your (web) application. Fortunately @font-face will allow us to do just that very easily. This article will demo how easy it is to embed a true type font into an HTML5/CSS3 (mobile) application.
Here is the page layout:
<html lang="en-us" ><head> <title>Font Test</title></head><body></body></html> |
At this point add in the CSS that is used to embed the font:
@font-face { font-family: EraserDust; src: url(EraserDust.ttf);} body { background: #333333; font-family: EraserDust; font-size: 24pt; color: #ffffff;} |
Note: In this simple the font placed in the same folder as the HTML file.
The HTML file looks like this:
<html lang="en-us" ><head> <title>Font Test</title> <style> @font-face { font-family: EraserRegular; src: url(EraserRegular.ttf); } @font-face { font-family: EraserDust; src: url(EraserDust.ttf); } body { background: #333333; font-family: EraserDust; font-size: 24pt; color: #ffffff; } </style></head><body> <p>This is a test!</p></body></html> |
Rendering the page you should see something like this:
Note: The technique should work on mobile browsers like the ones in the iPhone and Android devices as well as Chrome 4+, Safari 4+, Firefox 3.5+, and IE9. Keep in mind this is True Type fonts being demoed here.
For the most common fonts the pattern of support is this currently:
Embedded OpenType (EOT): IE5-9
True Type (TTF): FF 3.5+, Chrome 4+, Safari 4+, IE9
Open Type (OTF): FF 3.5+, Chrome 4+, Safari 4+, IE9, Opera 10.5+
Web Open Font (WOFF): Firefox 3.6+, IE9
+++from giantflyingsaucer.com
