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:
At this point add in the CSS that is used to embed the font:
Note: In this simple the font placed in the same folder as the HTML file.
The HTML file looks like this:
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