Fonts on the Web - a guide to web fonts
3 likes2,111 views
The document discusses the evolution of web fonts, highlighting the limitations of traditional web-safe fonts and various outdated techniques used to implement custom fonts. It emphasizes the advantages of modern web fonts, such as improved accessibility, SEO friendliness, and creative freedom for designers. Additionally, it addresses challenges with Arabic web fonts and the potential future improvements in rendering technologies.
Fonts on the Web - a guide to web fonts
- 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.