News Archive
PhpRiot Newsletter
Your Email Address:

More information

Ubuntu has a new font

Note: This article was originally published at Planet PHP on 13 October 2010.
Planet PHP

Along with the release of 10.10, Ubuntu came with a new self-named font. I love it. It's quirky, yet very legible.

The font is open-source, with a pretty straightforward license, which comes down to: 'include this license when redistributing. There's very little good free fonts out there that actually allow you to embed it on your site, but with this one you can.

You can download the ttf's from here. Embedding it using css is easy:

  1. @font-face {
  2. font-family: "Ubuntu Sans";
  3. src: url('font/ubuntu/Ubuntu-R.ttf');
  4. }
  5. @font-face {
  6. font-family: "Ubuntu Sans";
  7. src: url('font/ubuntu/Ubuntu-B.ttf');
  8. font-weight: bold
  9. }
  10. @font-face {
  11. font-family: "Ubuntu Sans";
  12. src: url('font/ubuntu/Ubuntu-I.ttf');
  13. font-style: italic
  14. }
  15. @font-face {
  16. font-family: "Ubuntu Sans";
  17. src: url('font/ubuntu/Ubuntu-BI.ttf');
  18. font-style: italic; font-weight: bold
  19. }

This looked immediately brilliant on Firefox, but Safari acts a bit weird, only anti-aliasing some of the text after hovering over.

Be aware though, this will add about 1.3MB to your page. If you don't need some of the italic or bold variations, i'd recommend leaving them out.

On font and copyrights

On a more serious note, many people don't know that most fonts you buy for your websites are never allowed to be straight-embedded into webpages. I've seen a number of people embedding their fonts with either @font-face or the dirty (but impressive) cufon, or the worst of all worlds: sifr.

Technically, with any of these technologies you are not just using, but redistributing the font. When you buy a font you are basically only allowed to generate static images. This might not be a big deal for your personal site, but it's not a wise thing to do for commercial sites.