Just another tech site

ASP.NET playing with custom fonts


Fonts

File Format

Font Formats Format Description
TTF Raw TrueType file, Developped by Apple in 1981
EOT Lite Embedded OpenType, EOTs are only supported by Internet Explorer
EOT Compressed EOT compressed with LZ compression
WOFF Cross-browser, web-only font format that uses gzip compression. IE9+, FF3.6+, Chrome 5+, WOFF is mostly TTF with compression and additional metadata [5]
SVG This is an XML format required by iOS devices before version 4.2. [4]
SVGZ This is gzipped version of SVG.

Where to get some fonts

Todo

Using fonts in Web Pages

Stadart Font

There are several ways of using the existing font in HTML pages.

  • Font Size,
  • <liFont Percentage,

    <liFont Em,

    <liPoint,

    <liPixel

this image gives an idea of the diference in the font representation [http://net.jasonpearce.com/tools/cssfontsizes.html]
CSS: Comparing Font Size, Percentage, Em, Point, and Pixel

@font-face

Not exactly a feature which is new to CSS3, @font-face was first proposed for CSS2 and has been implemented in Internet Explorer since version 5! However, their implementation relied on the proprietary Embedded Open Type (.eot) format, and no other browsers decided to use this format. With the release of Safari 3.1, however, website makers can use any licensed TrueType (.ttf) or OpenType (.otf) font in their pages.[1]

The Tool

the FaceFontKit at http://www.fontsquirrel.com/fontface/generator is a must in terms of web-fonts
The tool will generate a @font-face font kit that comes with:

– TrueType Fonts for Firefox 3.5+ , Opera 10+, Safari 3.1+, Chrome 4.0.249.4+
– EOT fonts for Internet Explorer 4+
– WOFF fonts for Firefox 3.6+, Internet Explorer 9+, Chrome 5+
– SVG fonts for iPad and iPhone
– Cufón fonts in case you want them
– Demo.html and stylesheet.css so you can get going fast

Let’s have a try
I selected the TitilliumText22LThin font and ran the generator

The generator returne the folowing files

This is the CSS generated

/* Generated by Font Squirrel (http://www.fontsquirrel.com) on September 14, 2011 */
@font-face {
    font-family: 'TitilliumText22LThin';
    src: url('titilliumtext22l001-webfont.eot');
    src: url('titilliumtext22l001-webfont.eot?#iefix') format('embedded-opentype'),
         url('titilliumtext22l001-webfont.woff') format('woff'),
         url('titilliumtext22l001-webfont.ttf') format('truetype'),
         url('titilliumtext22l001-webfont.svg#TitilliumText22LThin') format('svg');
    font-weight: normal;
    font-style: normal;

}

Code Sample

This is ASP.NET code sample

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Default2" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
	<title>untitled</title>
	<style type="text/css" media="screen">
		
@font-face {
	font-family: 'blok-regular';
	src: url('type/Blokletters-Potlood.eot');
	src: local('Blokletters Potlood Potlood'), 
		 local('Blokletters-Potlood'), 
		 url('type/Blokletters-Potlood.ttf') format('truetype');
}

@font-face {
	font-family: 'blok-italic';
	src: url('type/Blokletters-Balpen.eot');
	src: local('Blokletters Balpen Balpen'), 
		 local('Blokletters-Balpen'), 
		 url('type/Blokletters-Balpen.ttf') format('truetype');
}

@font-face {
	font-family: 'blok-heavy';
	src: url('type/Blokletters-Viltstift.eot');
	src: local('Blokletters Viltstift Viltstift'), 
		 local('Blokletters-Viltstift'), 
		 url('type/Blokletters-Viltstift.ttf') format('truetype');
}

h1 { font-family: blok-heavy, helvetica, arial; }
h2 { font-family: blok-italic, helvetica, arial; }
h3 { font-family: blok-regular, helvetica, arial; }
		
	</style>
</head>
<body>
    <form id="form1" runat="server">
    <div>
      <h1>text font h1</h1>
      <h2>text font h2</h2>
      <h2>text font h4</h2>
        text without font
    </div>
    </form>
</body>
</html>

the resulted page will look like

Additional webTools

http://www.font2web.com/ [font convertion]

Reference

[1] http://www.css3.info/preview/web-fonts-with-font-face/
[2] http://www.fontsquirrel.com/fontface
[3] http://en.wikipedia.org/wiki/TrueType
[4] http://www.w3.org/TR/SVG/fonts.html
[5] http://en.wikipedia.org/wiki/Web_Open_Font_Format

Advertisements

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

Tag Cloud

%d bloggers like this: