1. Web FONT
Nasser Hadjloo
Hadjloo.ir

2. Agenda Definitions Why do we need Web Fonts Persian Web Fonts Problem
Possible Solutions
How to create a Web Font
How to use a Web Font

3. Definitions Font: a tool to display words in the digital world
Character: The smallest part of a font which consists of different shape
Glyph: Different shape of a particular character like : ب – بـ - ـبـ - ـب

4. Definitions Code Point: Unique code of characters
Coding: Character encoding system
Unicode: The most completed coding system of the world which includes all symbols and glyphs of all alive and dead languages of the world

5. استانداردهای وب و بستر وب باز
Definitions
Text Render Engine: An application of which get the characters information and based on provided information, draw a shape on the screen.
استانداردهای وب و بستر وب باز

6. Web Font
WOFF: Since 2009 suggested as proposal and developed by Microsoft, Mozilla Foundation and Opera Software, currently it is becoming standard by W3C. It is almost TrueType, with some compression and metadata.

7. Web Font Problems
Character rendering Issue: Different fonts, are rendering different in different browsers and Text Render engines. EOT – TTF- SVG - WOFF

8. Web Font Problems Browsers Render Engine:
IE9 and FireFox 4 are using DirectWrite
CoreText in Mac
In Windows Firefox, Chrome, Safari, Opera, and IE6 are using Grayscale Anti-aliasing
IE7 and IE8 in windows are using ClearType to render texts
IE 8 Change the Windows Text Render engine to ClearType

9. Web Font Problems Font Size: Which glyphs included?
Font Tables: It is better no to use Kerning, Hinting and other complicated OpenType Features

10. Web Font Problems
Character Height: x-Height of Characters should not be long.

11. Possible Solutions Why a Font is designed? PDF, Screen, Web, Print, …
A web Font should design for Web Usage only, Considering all aspects of web requirements

12. How to Create A Web Font Having a healthy Font
Converting it to web font using available services
Meta Data and Web Use only
Embedding in Web page

13. Converting A Font to Web Font
Best Persian Web Font Generators
daFont.com
Fonts.com
FontDeck.com

14. Web Font Providers Fonts.com MyFonts.com Webink.com Typotheque.com
TypeKit.com
Google.com

15. Hinting
Rendering
X-Height
Web Only

16. How To use a Web Font Link to Font provider Include in CSS
<link href=' rel='stylesheet' type='text/css' />
Include in CSS
h1 {
font-family: ‘Parsoomash Millo', Tahoma; }

17. How To use a Web Font Embed it into your CSS Use it @font-face {
font-family: “Parsoomash Millo";
font-style: normal;
src: url("Type/Parsoomash_Millo.ttf"); }
font-family: “Parsoomash Millo Italic";
font-style: italic;
src: url("Type/Parsoomash_Millo_Italic.ttf");
Use it
h1 {
font-family: ‘Parsoomash Millo', Tahoma; }

18. Thank You
Nasser Hadjloo
@Hadjloo