2010-05-24 // Google's Webfont Directory and Font API

Right now, you can't use many fonts for common text if you are running a website. The shared font-set available on most operating systems and devices is small and well known: Arial/Helvetica, Times New Roman, and Courier (New). You even should investigate1) good fallback fonts if you are using Georgia, Verdana or Lucida.

But there is light at the end of the tunnel: modern browsers are supporting font loading techniques. The pitfall is that there is no simple way to serve your font-file. Operating systems are using other file formats than browsers and as bonus, even the major browsers are using two different ones:

Additionally, you have to be alerted to legal issues because you are not only using but distributing the fonts. This means even if you buy a license to use a font for doing webgraphics, you may not be allowed to offer it as .eot/.woff file.

This is where the Google Font API comes into play. It offers an easy way to use some new fonts on your website by including only one CSS file served by Google. The API takes care of browser issues and is serving only open source fonts.2) Just read the instructions and start using it.

But let us talk about the downsides:

  • Your visitors will download data from Google, offering usage statistics to them (e.g. via HTTP referrer). It is another jigsaw puzzle piece for Google to know everything about you, your visitors and your website.
  • No matter how smart the API is, your page rendering speed will get slower.
  • Your visitors have to download more data (→ the font file).

But even if the mentioned downsides are show-stoppers for you, you can learn how to use the new opportunities by investigating how the API is doing its job, e.g. to build an own solution without privacy issues.

1)
there is more than MS Windows. Think about *ix, Mac OS, Android, iPhone etc.
2)
since they're open source, they can be used even for print. However, read the license agreement carefully!
2010-05-24 @ 22:40 | written by Andreas Haerter
Tags:

Leave a comment…




  • E-Mail address will not be published.
  • Formatting:
    //italic//  __underlined__
    **bold**  ''preformatted''
  • Links:
    [[http://example.com]]
    [[http://example.com|Link Text]]
  • Quotation:
    > This is a quote. Don't forget the space in front of the text: "> "
  • Code:
    <code>This is unspecific source code</code>
    <code [lang]>This is specifc [lang] code</code>
    <code php><?php echo 'example'; ?></code>
    Available: html, css, javascript, bash, cpp, …
  • Lists:
    Indent your text by two spaces and use a * for
    each unordered list item or a - for ordered ones.
I'm no native speaker (English)
Please let me know if you find any errors (I want to improve my English skills). Thank you!
QR Code: URL of current page
QR Code: URL of current page 2010:05:24:google-font-api-and-webfonts-directory (generated for current page)