3 Answers
3

There are 2 methods with which you can embed the Ubuntu font in your website - using the Google Font Directory (preferred) or using the @font-face CSS declaration and converting your fonts manually.

Using Google Webfonts

You can now use the Ubuntu font as a Google web font. This will make the process a lot simpler. Most of the content of this part of the answer comes from sladen's answer.

Why is using the Google Font API the preferred method?

Using the Google Font API is an excellent suggestion as it allows webfonts to automatically work on all modern browsers without having to worry about the details. Using the font API means visitors will always see the latest version of the typeface automatically.

How can I use the Google Font API?

Since 21 December 2010 the Ubuntu Font Family is now included and deployable from the Google Font API, visit:

"Latin" is the script that English and many other European and African languages are written in.

"Subsetting" optimises the font files by only sending characters for certain languages, the fonts are around 44 kB eachs. The 168 kB figure shown at the moment is for all 1,200+ glyphs as a single web font download—and most are not needed for a single website.

The Ubuntu font files are automatically converted in the correct format for different browsers; depending on the make and version the required format is WOFF, EOT, SVG or TTF. The right combination of CSS is specific to each page request and magically solves this hard problem.

Using @font-face

You can embed the Ubuntu fonts by converting them to WOFF fonts. You can then embed them using the CSS @font-face declaration. The fonts (.ttf files) can be found in /usr/share/fonts/truetype/ubuntu-font-family.

For example, to use the Ubuntu Regular font, converted to a WOFF file, Ubuntu-R.woff, use this CSS code:

Considerations

Please remember that some users set up their browsers to use a specific set of fonts and may be annoyed if custom fonts are used. Also, read the Ubuntu Font Licence for exact terms as to how the font can be distributed.

I answered this question a long time before sladen, outlining the @font-face method. This was before the font was added to the Google Font API (which is a better method). I added only a short note to the beginning of my answer and sladen answered much more comprehensively and had a better answer for using the google method.
–
dv3500eaFeb 13 '11 at 17:02

1

However, at this time my answer was accepted and highly upvoted and the result was that people may think they should use the @font-face method which is less preferable. sladen contacted me via email about this and I agreed to change my answer, giving attribution as required by the creative commons licence of this site.
–
dv3500eaFeb 13 '11 at 17:02

Using the Google Font API is an excellent suggestion as it allows webfonts to automatically work on all modern browsers without having to worry about the details. Using the font API means visitors will always see the latest version of the typeface automatically.

Since 21 December 2010 the Ubuntu Font Family is now included and deployable from the Google Font API, visit:

Tick the combination of weights and styles out of Regular, Italic, Bold and Bold-Italic that you need for your web page.

If the default is incorrect, select the language/script combination you need: a Russian website with English examples might use "Cyrillic,Latin".

Copy and paste the two lines of CSS into the <head> ... </head> and <style>...</style> sections of your HTML page or templates.

Notes:

"Latin" is the script that English and many other European and African languages are written in.

"Subsetting" optimises the font files by only sending characters for certain languages, the fonts are around 44 kB each. The 168 kB figure shown at the moment is for all 1,200+ glyphs as a single web font download—and most are not needed for a single website.

The Ubuntu font files are automatically converted in the correct format for different browsers; depending on the make and version the required format is WOFF, EOT, SVG or TTF. The right combination of CSS is specific to each page request and magically solves this hard problem.