ddefinitions wwhy do we need web fonts ppersian web fonts problem ppossible solutions hhow to create...
TRANSCRIPT
WEB FONTNasser Hadjloo
Hadjloo.ir
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
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 : ب – بـ - ـبـ - ـب
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
Definitions
Text Render Engine: An application of
which get the characters information and
based on provided information, draw a
shape on the screen.
استانداردهای وب و بستر وب باز
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.
Web Font Problems
Character rendering Issue:
Different fonts, are rendering different
in different browsers and Text Render
engines. EOT – TTF- SVG - WOFF
IE 8 Change the Windows Text Render engine to ClearTypeIn Windows Firefox, Chrome, Safari, Opera, and IE6 are
using Grayscale Anti-aliasing
IE7 and IE8 in windows are using ClearType to
render texts
IE9 and FireFox 4 are using DirectWrite
Web Font Problems
Browsers Render Engine:
CoreText in Mac
Web Font Problems
Font Size: Which glyphs included?
Font Tables: It is better no to use
Kerning, Hinting and other
complicated OpenType Features
Web Font Problems
Character Height: x-Height of
Characters should not be long.
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
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
Converting A Font to Web Font
Best Persian Web Font
Generators
daFont.com
Fonts.com
FontDeck.com
Web Font Providers Fonts.com
MyFonts.com
Webink.com
Typotheque.com
TypeKit.com
Google.com
Hinting
Web Only
X-Height
Rendering
How To use a Web Font
Link to Font provider
<link href='http://fonts.hadjloo.ir/css?family=Parsoomash+Millo&subset=Arabic'
rel='stylesheet' type='text/css' />
h1 {font-family: ‘Parsoomash Millo', Tahoma;}
Include in CSS
How To use a Web Font
Embed it into your CSS
h1 {font-family: ‘Parsoomash Millo', Tahoma;}
@font-face { font-family: “Parsoomash Millo"; font-style: normal; src: url("Type/Parsoomash_Millo.ttf"); }@font-face { font-family: “Parsoomash Millo Italic"; font-style: italic; src: url("Type/Parsoomash_Millo_Italic.ttf"); }
Use it
