Ubuntu Font Family on the web

You can now use the Ubuntu Font Family as a webfont via the CSS @font-face mechanism, this has been supported since 21 December 2010 via the Google Font API. The Google Font API is a cross-browser system that allows visitors to see the clarity and beauty of the Ubuntu Font Family your websites, without having to worry about what fonts they have installed locally.

A compressed and optimised version of the requested font is automatically downloaded via the web, and encoded into the right format for each specific browser. This means takes the worry out of needing to provide and update all the versions (TTF, EOT, WOFF, SVG) needed by today's browsers.

To use the Ubuntu Font Family on the websites you maintain, select the "Ubuntu" in the Google Font Directory and copy the few lines of code shown.

Enabling the site can be as simple as adding two lines to the <head> section of the HTML pages or templates (or one line if you are already requesting 'Ubuntu' as the font-family!). First choose the font just as you would do normally:

  • <style>body { font-family: Ubuntu, sans-serif; }</style>

Then use the Google Font API magic to enable the styles that you need to be fetched. If you have a Latin-based website and only use regular and bold on a particular page, use the following addition in your pages and then reload the page to test:

  • <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Ubuntu:regular,bold&subset=Latin">

Greater control

If you need more control and better background loading then you may want to use the Google WebFont Javascript loader, if you're looking for an example, visit www.ubuntu.com and choose "View Source" in your browser!

You can also combine multiple subsets, for example, combining Latin and Greek, or Latin and Cyrillic in the following example:

  • <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Ubuntu:regular&subset=Latin,Cyrillic">

Further reading