Ubuntu – Embed Ubuntu font on any web page

licenseubuntu-font-familywebsites

Considering licences like:

how can I use Ubuntu font family on any website without making user to install it?
Any chance of using it with tools like: http://code.google.com/intl/en-US/apis/webfonts/

Best Answer

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:

You can read the Google Web Font posting about the news, and then:

  1. Open the Google Font Directory: "Ubuntu - Use this font" page

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

    alt text

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

    alt text

  4. Add the given <link> tag between <head> ... </head> in your HTML page or templates and add the appropriate CSS code in between <style> ... </style> tags in your <head>.

    For example, if you were creating the Russian/English hybrid website and wanted to use the font as the default for all text, you could add the following code between your <head> tags:

    <link href='http://fonts.googleapis.com/css?family=Ubuntu&subset=cyrillic,latin' rel='stylesheet' type='text/css' />
<style type="text/css" >
    body {
        font-family : 'Ubuntu', sans-serif;
    }
</style>

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 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:

@font-face
{
    font-family : "Ubuntu-R";
    src: url('Ubuntu-R.woff');
}

Similarly for Ubuntu Bold:

 @font-face
{
    font-family : "Ubuntu";
    src: url('Ubuntu-B.woff');
    font-weight : bold;
}

Ubuntu Italic:

@font-face 
{
    font-family : "Ubuntu";
    src: url('Ubuntu-I.woff');
    font-style : italic;
}

Ubuntu Bold Italic:

@font-face
{
    font-family : "Ubuntu";
    src: url('Ubuntu-BI.woff');
    font-weight : bold;
    font-style : italic;
}

This is supported by all recent browsers.

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.

Related Question