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

About these ads
By max macapagal Posted in Posts

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s