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

By max macapagal Posted in Posts

Embedding Fonts

Embedding Fonts in your Web Site with CSS and @font-face

Adding @font-face fonts to your Web site is not that difficult. It just takes a few steps. Thanks to  bavotasan.com.

First, you need to download some @font-face kits. I like to use kits supplied by Font Squirrel because they have an awesome library and all their fonts are 100% free for commercial use. For this example I’m going to use Riesling.

Once you have the files downloaded you need to add them to your Web site. Create a folder named “fonts” and place the riesling.eot and riesling.ttf files into the folder. Upload that to your site, in to the same directory as your style sheet.

Now open your style sheet and add the following:

/*
 *
 * The fonts included are copyrighted by the vendor listed below.
 *
 * @vendor:     Bright Ideas
 * @licenseurl: http://www.fontsquirrel.com/license/Riesling
 *
 *
 */

@font-face {
	font-family: 'RieslingRegular';
	src: url('fonts/riesling.eot');
	src: local('Riesling Regular'), local('Riesling'),
              url('fonts/riesling.ttf') format('truetype');
}

Everything is in place for you to use Riesling as a font on your Web site. Just add it to your CSS like you would any other font-family:

h1 {
  font-family: 'RieslingRegular', Arial, sans-serif;
}

The one thing you need to realize when using @font-face kits is that only modern browsers recognize it.

This is a sample paragraph that uses @font-face kits and CSS. If you see this paragraph in Riesling then your browser supports @font-face. If not, you might need to upgrade your browser to take advantage of @font-face kits.

By max macapagal Posted in Posts