In one of the previous articles I was handling methods of inserting and using non-standard fonts on the websites. After a few months of running of a new interface Google Font API and associated font library Google Font Directory I would like to describe this solution.
Google Font API is an interface enabling easy implementation of fonts, especially of those which are contained in the library Google Font Directory. For more advanced work with fonts, WebFont Loader is available. The entire solution uses the standard of CSS, quality of @font-face and is so called CSS3 and HTML5 compatible. As for the technology, it is not new, but we can consider enabling global access to freely usable fonts and simple implementation as new. Before technical description of sample implementation I present pros and cons of this solution.
Facts
- The service has been running only since 20 may 2010 which is very short time. We will see how it will develop in the future.
- There are already well established services with good support as TypeKit or FontDeck and other on the market.
- Interesting high-performance Javascript Library WebFont Loader for advanced work with font properties was developed in cooperation with specialists from TypeKit.
Pros
- Simplicity and speed of solution.
- Free licence for using on the web. There is no need to undergo martyrium of licencing purchased fonts for each domain.
- Quick access to the files lying on CDN servers Google and related quicker display, cache in the browser and overall reduction of transferred data from the web hosting.
- Minimization of errors caused by typos and erroneous linking of font files variants.
Cons
- Relatively small number of fonts provided. No quality script, in practise.
- Many fonts do not support western europ or baltic charset. Fonts applicable for Czech text: Cantarell, Droid Sans Mono, IM Fell, Inconsolata, Josefin Sans Std Light, OFL Sorts Mill Goudy TT and Reenie Beanie (serious error of kerning by the letter ”ť”).
- fonts are not technically very good. The main stumbling block is that kerning pairs are set incorrectly . In practise and especially when using larger font size, gaps between particular characters (RU, VAC, ť, ď etc.) arise.
- It is very hard to read fonts on operating system Windows with turned off antialising.
- it does not support SVG types variants essencial for displaying on iPhone/iPad. However, Fonts can be downloaded and files generated.
Implementation
The implementation consists of uploading the font on the web site and of application of the font through CSS on the selected site elements.
The first step is to insert a font, there are two variants available here
-
Font insertion ”IM Fell DW Pica” with a tag <link> in <head> <link href='http://fonts.googleapis.com/css?family=IM+Fell+DW+Pica' rel='stylesheet' type='text/css'>
-
Insertion of a font ”Inconsolata” using @import directly in definition of CSS:
@import url ('http://fonts.googleapis.com/css?family=Inconsolata');
The second step is to define inserted font on the web site elements
h1 {font-family: 'IM Fell DW Pica', arial, serif;}
p {font-family: 'Inconsolata', arial, serif;}
Summary
According to my opinion, this service has a great future ahead. It presents quick and simple way of displaying text on web by other than ”standard” font. It is free and without problems associated with the licence obtaining.
More information about Google Font Api can be found here: http://paulirish.com/2010/details-on-the-new-google-webfont-api/ and http://paulirish.com/2009/fighting-the-font-face-fout/
Author: Jaroslav Vrána
