← Back to branch summary

~fitojb/ubuntu-font-family-website/update-web-section

« back to all changes in this revision

Viewing changes to web/index.html

  • Committer: Steve Edwards
  • Date: 2011-08-30 17:13:08 UTC
  • mto: (53.2.1 redesign-merge)
  • mto: This revision was merged to the branch mainline in revision 54.
  • Revision ID: steve.edwards@canonical.com-20110830171308-wubp65sz8ynxgb25
First release of site redesign

Show diffs side-by-side

added added

removed removed

Lines of Context:
web/index.html
1
 
<html>
2
 
  <head>
3
 
    <title>Ubuntu Webfonts - Ubuntu Font Family</title>
4
 
    <link rel="stylesheet" type="text/css" href="../assets/styles.css" />
5
 
  </head>
6
 
  <body>
7
 
    <div id="wrapper">
8
 
      <div id="header">
9
 
        <a href="http://www.ubuntu.com"></a>
10
 
      </div>
11
 
      <div id="main">
12
 
        <h1>Ubuntu Font Family <span>on the web</span></h1>
13
 
        <div id="content">
14
 
 
15
 
          <p>You can now use the <a href="../">Ubuntu Font
16
 
          Family</a> <strong>as a webfont</strong> via the
17
 
          CSS <code>@font-face</code> mechanism, this
18
 
          has <a href="https://launchpad.net/bugs/655305">been
19
 
          supported</a> since 21 December 2010 via the Google Font
20
 
          API.  The Google Font API is a cross-browser system that
21
 
          allows visitors to see the clarity and beauty of the Ubuntu
22
 
          Font Family your websites, without having to worry about
23
 
          what fonts they have installed locally.</p>
24
 
 
25
 
          <p>A compressed and optimised version of the requested font
26
 
          is automatically downloaded via the web, and encoded into
27
 
          the right format for each specific browser.  This means
28
 
          takes the worry out of needing to provide and update all the
29
 
          versions (TTF, EOT, WOFF, SVG) needed by today's browsers.</p>
30
 
 
31
 
          <p>To use the Ubuntu Font Family on the websites you
32
 
          maintain, select the "<strong>Ubuntu</strong>" in the Google
33
 
          Font Directory and copy the few lines of code shown.</p>
34
 
 
35
 
          <ul>
36
 
            <li>Visit the <a href="http://code.google.com/webfonts/">Google Font Directory</a></li>
37
 
          </ul>
38
 
 
39
 
          <p>Enabling the site can be as simple as adding two lines to
40
 
          the <code>&lt;head&gt;</code> section of the HTML pages or
41
 
          templates (or one line if you are already requesting
42
 
          '<code>Ubuntu</code>' as the font-family!).  First choose the
43
 
          font just as you would do normally:</p>
44
 
 
45
 
          <ul>
46
 
            <li><code>&lt;style&gt;body { font-family: Ubuntu, sans-serif; }&lt;/style&gt;</code></li>
47
 
          </ul>
48
 
 
49
 
          <p>Then use the Google Font API magic to enable the styles
50
 
          that you need to be fetched.  If you have a Latin-based
51
 
          website and only use regular and bold on a particular page,
52
 
          use the following addition in your pages and then reload the page to test:</p>
53
 
 
54
 
          <ul>
55
 
            <li><code>&lt;link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?<strong>family=Ubuntu:regular,bold</strong>&amp;subset=Latin"&gt;</code></li>
56
 
          </ul>
57
 
 
58
 
          <h2>Greater control</h2>
59
 
 
60
 
          <p>If you need more control and better background loading
61
 
          then you may want to use the
62
 
          <a href="http://code.google.com/apis/webfonts/docs/webfont_loader.html">Google
63
 
          WebFont Javascript loader</a>, if you're looking for
64
 
          an example,
65
 
          visit <a href="http://www.ubuntu.com/">www.ubuntu.com</a>
66
 
          and choose "View&nbsp;Source" in your browser!</p>
67
 
 
68
 
          <p>You can also combine multiple subsets, for example, combining Latin and Greek, or Latin and Cyrillic in the following example:</p>
69
 
 
70
 
          <ul>
71
 
            <li><code>&lt;link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Ubuntu:regular&amp;<strong>subset=Latin,Cyrillic</strong>"&gt;</code></li>
72
 
          </ul>
73
 
 
74
 
          <h2>Further reading</h2>
75
 
 
76
 
          <ul>
77
 
            <li><em><a href="http://googlewebfonts.blogspot.com/2010/12/introducing-ubuntu-font-family-to-web.html">Introducing the Ubuntu Font Family to the web</a></em>. Web Font Blog (Google).  Published 2010-12-20.</li>
78
 
          </ul>
79
 
 
80
 
        </div>
81
 
      </div>
82
 
      <div id="footer">
83
 
        &copy; 2010 Canonical Ltd. Ubuntu and Canonical are
84
 
        registered trademarks of Canonical Ltd.
85
 
      </div>
86
 
    </div>
87
 
  </body>
88
 
</html>
89