Web fonts offer great flexibility for brands and designers to use a wider range of fonts online. Using a custom font on the web was only achievable through various techniques, all with certain limitations. Most designers opted to stick with Web Safe Fonts – which are fonts that are already installed by default across different operating systems.

1. W fo

2. Web Safe Fonts
Web Fonts
Why should you use web fonts

3.  The past
Using a custom font on the web was only achievable through various
techniques, all with certain limitations. Most designers opted to stick with
Web Safe Fonts – which are fonts that are already installed by default across
different operating systems.
 The Web-Safe fonts
Arial Georgia Verdana
Courier New Times Trebuchet

4. Some previously popular techniques to use custom fonts on the web
Using images Cufon – Using Javascript
instead of text – sIFR (Scalable Inman Flash code to render SVG font paths
Replacement) – Requiring Javascript and via VML technology, this
This technique
Flash, which makes it heavily dependent on technique works very good in
requires images to be a browser plugin – usually slow and most aspects and is widely
placed instead of text, seemingly unreliable. This technique was popular and very simple to
difficulty for web very popular before improved techniques implement. However it still
developers, making like Cufon came along, however, its suffers from limitations like non-
the website not implementation was not always selectable text and undesirable
Search-engine friendly straightforward and it also made web pages effects on body copy (text
slow to load due to the amount of separate paragraphs).
and the text not
web requests needed.
selectable. This also
causes many small
web requests to go Background Image Replacement – Very similar to using images
back to the server for instead of text, however this technique is using CSS background-image properties
in order to hide the actual text from display and show instead an image containing
each piece of text,
the desired text. This technique although SEO friendly, still poses difficulties for
making web pages to developers – the text is not selectable and is not a practical method. It also slows
load slower. down a website’s load time, just like its image replacement counterpart.

5. WEB FONTS are
h
o
w
do they work

6. Web fonts allow designers to chose
from a wide variety of fonts as well as
1. More creative freedom
convert their own fonts to web fonts.
2. Easier to implement This also allows brands to use
corporate fonts on their online
3. Is using plain text
properties, this especially was a
4. Search engine friendly challenge previously where most
brands had to chose from the limited
5. More accessible for screen readers number of web safe fonts.
6. Easy to select, copy and paste
Web fonts further offer a lot more
7. Can be scaled without pixilation
advantages such as being search
8. Easier to translate into languages engine friendly, are easier to translate
to other languages as well as the
9. Licensing made easy by using
availability of many font services that
web services make licensing much easier than
before.

7. WOFF (Web Open
Font Format)
SVG (Scalable Vector
Graphics) EOT (Embedded Open • Emerging standard format –
Type) developed by Mozilla and several
other font foundries.
• XML Language used to
create vector graphics. • Font format developed by • Adopted as standard by W3C in
Targets mobile platform. Microsoft. Targets Internet 2010.
Explorer (IE)
• Supported by Mozilla Firefox
3.6+, Google Chrome 5+, Opera
Preso and IE9 (since March
2011).
• Not supported by Safari.
Combining all three formats, web fonts are currently supported by over
95% of web browsers which makes it available to large number of users.

8. Traditional Way
Fonts were designed for print media – therefore not optimized for screen display.
Forward Slide for the Web Fonts way ---->

9. The Web Fonts Difference
With the use of Web Fonts, improved rendering techniques and font optimization for the
web, web pages can now benefit from a much improved rendering approach, and can
also make use of the operating system’s Text Anti-aliasing engine.
This means a more readable text display and seamless rendering performance for Web
Fonts on any web page.
Text Anti-Aliasing
Each operating system uses their own algorithm for text anti-aliasing. At the moment,
MAC OS X renders text using Sub-pixel anti-aliasing, however Windows using different
techniques depending on their OS version, of which the DirectWrite algorithm is the
newest one, available on Windows 7.

10. Several services
currently help web
designers and
developers to access
a huge collection of
fonts and implement
on their websites and Compare and Decide !
web applications
The site “@font-face faceoff”
(http://fffo.grahambird.co.uk/ )
provides a useful comparison of
different Web Font delivery
services, depending on their
payment model, collection size,
technology use, etc.
This comparison site excludes http://www.typefront.com and http://www.google.com/webfonts

11. ools below will help anyone get started with embedded Web Fonts on their web sites :
http://www.Webfontsspecimen.com
http://www.onlinefontconverter.com/
http://www.Typetester.org
http://ttf2eot.sebastiankippe.com/
http://www.typekit.org (browser samples)
If you already have a web license for your font, you can try the @font-face generator service at
http://www.fontsquirrel.com

12. Current Limitations Challenges
Practical Arabic web fonts limited on Windows Arabic written from right-left – poses challenges to rendering
to Arial, Tahoma, Andalus & Arabic engines and libraries.
Typesetting. On Mac – Geeza Pro
Arabic fonts require reshaping, i.e. determining and selecting
Font design is compromised with images used shape of a letter depending on its location in the word.
for major headlines & default Arabic font for
larger bodies of text Arabic rendering engines also need to support diacritics –
accents and marks that are inserted around the letter to help
the reader in pronouncing words.
Hefty price to meet all these requirements.
The Future Apart from technical issues – Arabic font is not as well
Once support for Arabic font rendering is developed as its Latin counterparts.
consistent across all browsers – we shall see
explosion in services and foundries offering Getting Arabic to the web
quality Arabic web fonts Past methods: Image replacement techniques, Cufon and sIFR
Improvement in Arabic font rendering might Recent methods: CSS3 @font-face property, Firefox4 and IE9
also encourage Arabic web content to flourish. render Arabic web fonts – Chrome soon to follow
An example of mainstream use of @font-face on an Arabic website can be seen on BBC Arabic http://bbc.co.uk/arabic/.
Viewing the website on Firefox 4+ and Internet Explorer 9+ yields satisfying results. The headlines and body text are both
utilizing an Arabic font specially created for BBC Arabic called BBC Nassim.