Using web fonts

Web fonts browser support overview

ChromeExplorerFirefoxOperaSafari
@font-face4+4+3.5+10+3.1+
Web Open Font Format (woff)6+9+3.6+10+5+
Embedded Open Type (eot)x
True Type (ttf)xxxx
Open Type (otf)xxxx
SVG Fonts (svg)x

Web fonts are a font format with a explicit license that allows web designers to use true online typography. They represent a flexible tool for enhancing a website. Fortunately, the @font-face feature of CSS3 is equally flexible: It enables us to employ customised fonts in an easy fashion. Thus, we can access, manipulate and scale these typefaces.

While there are other options such as sIFR and Cufon, @font-face offers a few particular privileges. For instance, the incorporated fonts are fully searchable by the usual Find function (ctrl-F) of browsers. Also, other applications such as screen readers can access these web fonts, too. In particular, text expressed in such faces yields itself to automatic translation.

As for manipulating web fonts, CSS can adjust their appearance in fine detail. Especially, crucial parameters such as letter-spacing and line-height are entirely accessible.

We easily declare such a novel custom font, for instance:

@font-face {
 font-family: 'Signatia';
 src: url('signatia.ttf');
 }

Next, we use this new typeface – for example:

h1, h2, h3 { font-family: 'Signatia', 'Georgia', serif; }

When we declare the font face in the above manner, we use its property “font-family” for giving the font its particular name. Therefore, this label does not have to be identical to the proper name of the font.

In the property “src”, we leave the information where a particular web browser finds the required font asset. However, different browsers expect individual font types, such as ttf or eot. Therefore, for its use in actual applications, the given font-face declaration lacks robustness. A practical instance must give an EOT font to the Internet Explorer, which may be done like this, for example:

@font-face {
 font-family: 'signatia';
 src: url('signatia.eot'); /* older IEs */
 src: local('x'), /* circumvent older IEs */
 url('signatia.woff') format('woff'), /* Firefox, Chrome, newer IE */
 url('signatia.ttf') format('truetype'), /* Opera, Safari */
 url('signatia.svg#font') format('svg'); /* iOS */
 }

While Mobile Safari handles SVG web fonts as well as Android deals with OTF faces, presenting these fonts to users may not be recommendable for now. WebKit does not yet handle a text gracefully that expects a custom font: Such texts remain invisible until all font data has come in over a possibly slow connection.

 

 

Leave a Reply

Your email address will not be published. Required fields are marked *