Embedding Fonts Html 5/CSS

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