Advances in Web typography

· by · in ,

If you’re running a WebKit nightly, your browser supports two new ways of specifying custom fonts.

CSS2 ‘WebFonts’

With WebFonts you can define custom font faces by passing a URL to the font file:

@font-face {
  font-family: 'Bitstream Vera Sans';
  src: url('http://www.freedesktop.org/~alp/tmp/Vera.ttf') format(truetype);
}
 
h1 {
  font-family: 'Bitstream Vera Sans', sans-serif;
}

The font gets downloaded and used without installation. A List Apart has some fancy CSS Zen Garden examples showing off the feature:

WebKit font-face

Now that the WIP Acid3 test requires TrueType/@font-face support, I expect other browser engines will be quick to join Opera and WebKit in implementing this.

SVG fonts

Then there’s the recently added support for SVG fonts.

 WebKit SVG font

When #16880 lands, it’ll be possible to use SVG fonts not only in SVG content, but also as a standard WebFont format with @font-face:

@font-face {
  font-family: 'SVGraffiti';
  font-weight: normal;
  font-style: italic;
  src: url("SVGraffiti.svg") format(svg);
}

This is still under development but works remarkably well. Nice work, Nikolas!

SVG font backend for Cairo

SVG fonts aren’t just for the Web — work is under way to make it possible to use them throughout the desktop with the experimental SVG font backend for Cairo. More on this coming very soon.

Checking it out

Building WebKit/GTK+ is now easier with the newly introduced autotools build system. Try the build instructions on GNOME Live! or just use jhbuild (module ‘WebKit’).

Related posts:

  1. WebKit for Windows gets Cairo support