Home / ubuntu / Questions / 16556
Accepted
takeshin
Asked: 2010-12-08 09:52:36 +0800 CST

Embed Ubuntu font on any web page

  • 772

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/

license websites ubuntu-font-family

3 Answers

  1. 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.

    • 29

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

    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.
    3. If the default is incorrect, select the language/script combination you need: a Russian website with English examples might use "Cyrillic,Latin".
    4. 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.

    • 10

  3. Server-side font rendering (of maybe better "dynamic font rendering") has been an interesting issue for quite a long time.

    Technically, it seems logical that in order for a machine to display a specific font, it should already be installed locally.

    On the other hand, web design loses a lot by having to stick to the basic/well-known 'web fonts'.

    CSS2.1 have made some improvements by using @font-face rule declaration.
    It has not yet become a standard, but it will eventually with CSS3.

    Besides that, there have been a few alternate methods, like:

    I hope the links provided will give you a better idea of what can be done ;-)

    • 8