Take the 2-minute tour ×
Ask Ubuntu is a question and answer site for Ubuntu users and developers. It's 100% free, no registration required.

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/

share|improve this question

3 Answers 3

up vote 24 down vote accepted

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.

share|improve this answer
    
@DKuntz2 - that is indeed better; I have now changed my answer. –  dv3500ea Jan 2 '11 at 0:38
    
Didn't understand the need to copy sladen's answer. Why not just edit it? –  papukaija Feb 13 '11 at 16:43
    
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. –  dv3500ea Feb 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. –  dv3500ea Feb 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:

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.

share|improve this answer

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 ;-)

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.