W fo

Web Fonts

Web Safe Fonts

Why should you use web fonts

different operating systems.

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

The Web-Safe fonts

Arial

Courier New

Georgia

Times

Verdana

Trebuchet

Using images instead of text –

This technique requires images to be placed instead of text, difficulty for web developers, making the website not Search-engine friendly and the text not selectable. This also causes many small web requests to go back to the server for each piece of text, making web pages to load slower.

sIFR (Scalable Inman Flash

Replacement) – Requiring Javascript and

Flash, which makes it heavily dependent on

a browser plugin – usually slow and

seemingly unreliable. This technique was

very popular before improved techniques

like Cufon came along, however, its

implementation was not always

straightforward and it also made web pages

slow to load due to the amount of separate

web requests needed.

Cufon – Using Javascript

code to render SVG font paths

via VML technology, this

technique works very good in

most aspects and is widely

popular and very simple to

implement. However it still

suffers from limitations like non-

selectable text and undesirable

effects on body copy (text

paragraphs).

Background Image Replacement – Very similar to using images

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

the desired text. This technique although SEO friendly, still poses difficulties for

developers – the text is not selectable and is not a practical method. It also slows

down a website’s load time, just like its image replacement counterpart.

Some previously popular techniques to use custom fonts on the web

WEB FONTS are

how

do they work

1. More creative freedom

2. Easier to implement

3. Is using plain text

4. Search engine friendly

6. Easy to select, copy and paste

5. More accessible for screen readers

7. Can be scaled without pixilation

8. Easier to translate into languages

9. Licensing made easy by using

web services

Web fonts allow designers to chose from a wide variety of fonts as well as convert their own fonts to web fonts. This also allows brands to use corporate fonts on their online properties, this especially was a challenge previously where most brands had to chose from the limited number of web safe fonts. Web fonts further offer a lot more advantages such as being search engine friendly, are easier to translate to other languages as well as the availability of many font services that make licensing much easier than before.

SVG (Scalable Vector Graphics)

• XML Language used to create vector graphics. Targets mobile platform.

EOT (Embedded Open Type)

• Font format developed by Microsoft. Targets Internet Explorer (IE)

WOFF (Web Open Font Format)

• Emerging standard format –

developed by Mozilla and several other font foundries.

• Adopted as standard by W3C in 2010.

• 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.

Traditional Way

Fonts were designed for print media – therefore not optimized for screen display.

Forward Slide for the Web Fonts way ---->

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.

The Web Fonts Difference

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.

Text Anti-Aliasing

Compare and Decide !

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.

Several services currently help web

designers and developers to access a huge collection of fonts and implement on their websites and

web applications

This comparison site excludes http://www.typefront.com and http://www.google.com/webfonts

Tools below will help anyone get started with embedded Web Fonts on their web sites :

If you already have a web license for your font, you can try the @font-face generator service at

http://www.fontsquirrel.com

http://www.Webfontsspecimen.com

http://www.onlinefontconverter.com/

http://www.Typetester.org

http://ttf2eot.sebastiankippe.com/

http://www.typekit.org (browser samples)

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.

Practical Arabic web fonts limited on Windows to Arial, Tahoma, Andalus & Arabic Typesetting. On Mac – Geeza Pro Font design is compromised with images used for major headlines & default Arabic font for larger bodies of text

Once support for Arabic font rendering is consistent across all browsers – we shall see explosion in services and foundries offering quality Arabic web fonts Improvement in Arabic font rendering might also encourage Arabic web content to flourish.

Arabic written from right-left – poses challenges to rendering engines and libraries. Arabic fonts require reshaping, i.e. determining and selecting shape of a letter depending on its location in the word. 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. Apart from technical issues – Arabic font is not as well developed as its Latin counterparts.

Past methods: Image replacement techniques, Cufon and sIFR Recent methods: CSS3 @font-face property, Firefox4 and IE9 render Arabic web fonts – Chrome soon to follow

Current Limitations Challenges

The Future

Getting Arabic to the web