ubuntu-font-family-website

Merge lp:~fitojb/ubuntu-font-family-website/update-web-section into lp:ubuntu-font-family-website

  1. update-web-section
  2. Merge into deployed
Proposed by Adolfo Jayme Barrientos
Status: Needs review
Proposed branch: lp:~fitojb/ubuntu-font-family-website/update-web-section
Merge into: lp:ubuntu-font-family-website
Diff against target: 187 lines (+82/-88)
2 files modified
index.html (+1/-1)
web/index.html (+81/-87)
To merge this branch: bzr merge lp:~fitojb/ubuntu-font-family-website/update-web-section
Reviewer Review Type Date Requested Status
Ubuntu Font Family Website contributors Pending
Review via email: mp+159729@code.launchpad.net

Commit message

Update ‘Web’ page: add styling, mention Typekit, add per-family links for GWF and Typekit, drop GWF instructions as they may get out of date. Link to that page from home.

Description of the change

Update ‘Web’ page: add styling, mention Typekit, add per-family links for GWF and Typekit, drop GWF instructions as they may get out of date. Link to that page from home.

To post a comment you must log in.

Unmerged revisions

71. By Adolfo Jayme Barrientos

Update ‘Web’ page: add styling, add Typekit links, drop GWF instructions as they may get out of date. Also, link to that page from home.

Preview Diff

[H/L] Next/Prev Comment, [J/K] Next/Prev File, [N/P] Next/Prev Hunk
=== modified file 'index.html'
--- index.html 2013-03-26 10:32:42 +0000
+++ index.html 2013-04-18 21:19:40 +0000
@@ -83,7 +83,7 @@
83 83
84 <div class="grid-4 border-right" itemprop="significantLinks">84 <div class="grid-4 border-right" itemprop="significantLinks">
85 <span itemscope itemtype="http://schema.org/Offer"><a class="link-action" href="../download/ubuntu-font-family-0.80.zip" type="application/zip">Download for <span itemprop="price">free</span> &rsaquo;</a><span itemprop="itemOffered"><span itemscope itemtype="http://schema.org/Product"><meta itemprop="name" content="Ubuntu Font Family"/><meta itemprop="brand" content="Ubuntu"/><meta itemprop="manufacturer" content="Canonical Ltd"/><meta itemprop="model" content="0.80"/></span></span></span><br class="clear" />85 <span itemscope itemtype="http://schema.org/Offer"><a class="link-action" href="../download/ubuntu-font-family-0.80.zip" type="application/zip">Download for <span itemprop="price">free</span> &rsaquo;</a><span itemprop="itemOffered"><span itemscope itemtype="http://schema.org/Product"><meta itemprop="name" content="Ubuntu Font Family"/><meta itemprop="brand" content="Ubuntu"/><meta itemprop="manufacturer" content="Canonical Ltd"/><meta itemprop="model" content="0.80"/></span></span></span><br class="clear" />
86 <p>Want to use the Ubuntu Font Family on the web? Visit <a href="http://www.google.com/webfonts/specimen/Ubuntu">Ubuntu on Google Web Fonts &rsaquo;</a></p>86 <p><a href="./web">Want to use the Ubuntu Font Family on the web? &rsaquo;</a></p>
87 </div>87 </div>
8888
89 <div class="grid-4">89 <div class="grid-4">
9090
=== modified file 'web/index.html'
--- web/index.html 2013-03-26 10:32:42 +0000
+++ web/index.html 2013-04-18 21:19:40 +0000
@@ -1,89 +1,83 @@
1<!DOCTYPE html>
1<html>2<html>
2 <head>3<head>
3 <title>Ubuntu Webfonts - Ubuntu Font Family</title>4<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
4 <link rel="stylesheet" type="text/css" href="../assets/styles.css" />5
5 </head>6<title>Web | Ubuntu Font Family</title>
6 <body>7
7 <div id="wrapper">8<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Ubuntu:400,400italic,700">
8 <div id="header">9<link rel="stylesheet" type="text/css" media="screen" href="../assets/css/reset.css" />
9 <a href="http://www.ubuntu.com"></a>10<link rel="stylesheet" type="text/css" media="screen" href="..//assets/css/960.css" />
10 </div>11<link rel="stylesheet" type="text/css" media="screen" href="..//assets/css/base.css" />
11 <div id="main">12
12 <h1>Ubuntu Font Family <span>on the web</span></h1>13</head>
13 <div id="content">14
1415<body class="licence">
15 <p>You can now use the <a href="../">Ubuntu Font16
16 Family</a> <strong>as a webfont</strong> via the17<div id="header-and-content" class="container-12">
17 CSS <code>@font-face</code> mechanism, this18
18 has <a href="https://launchpad.net/bugs/655305">been19<div id="header" class="clearfix">
19 supported</a> since 21 December 2010 via the Google Font20 <div class="grid-12">
20 API. The Google Font API is a cross-browser system that21 <ul>
21 allows visitors to see the clarity and beauty of the Ubuntu22 <li><a href="../">Home</a></li>
22 Font Family your websites, without having to worry about23 <li><a href="../about">About</a></li>
23 what fonts they have installed locally.</p>24 <li><a href="../gallery">Gallery</a></li>
2425 <li><a href="../licence">Licence</a></li>
25 <p>A compressed and optimised version of the requested font26 <li><a href="../resources">Resources</a></li>
26 is automatically downloaded via the web, and encoded into27 </ul>
27 the right format for each specific browser. This means28 <a class="logo-ubuntu" href="../"><img src="../assets/img/logo-ubuntu-header.png" width="118" height="27" alt="Ubuntu logo" /></a>
28 takes the worry out of needing to provide and update all the29 <h2><a href="../">Font Family</a></h2>
29 versions (TTF, EOT, WOFF, SVG) needed by today's browsers.</p>30 </div>
3031</div><!-- /#header -->
31 <p>To use the Ubuntu Font Family on the websites you32
32 maintain, select the "<strong>Ubuntu</strong>" in the Google33<div id="content" class="clearfix">
33 Font Directory and copy the few lines of code shown.</p>34
3435 <div class="grid-12">
35 <ul>36 <div class="content-heading">
36 <li>Visit the <a href="http://www.google.com/webfonts/">Google Font Directory</a></li>37 <a class="link-action" href="../download/ubuntu-font-family-0.80.zip">Download for free &rsaquo;</a>
37 </ul>38 <h1>Ubuntu Font Family on the web</h1>
3839 </div>
39 <p>Enabling the site can be as simple as adding two lines to40 </div>
40 the <code>&lt;head&gt;</code> section of the HTML pages or41
41 templates (or one line if you are already requesting42 <div class="grid-12">
42 '<code>Ubuntu</code>' as the font-family!). First choose the43 <div class="content-intro">
43 font just as you would do normally:</p>44 <p>You can use the Ubuntu Font Family as a webfont through the <a href="http://www.google.com/fonts">Google Fonts</a> and <a href="https://typekit.com">Typekit</a> services. Google Fonts and Typekit are cross-browser systems that allows visitors to see the clarity and beauty of the Ubuntu Font Family in your websites, without having to worry about what fonts they have installed locally.</p>
4445
45 <ul>46 <p>A compressed and optimised version of the requested font is automatically downloaded via the web, and encoded into the right format for each specific browser. This means takes the worry out of needing to provide and update all the versions (TTF, EOT, WOFF, SVG) needed by today’s browsers.</p>
46 <li><code>&lt;style&gt;body { font-family: Ubuntu, sans-serif; }&lt;/style&gt;</code></li>47 </div>
47 </ul>48
4849 <div id="resources">
49 <p>Then use the Google Font API magic to enable the styles50 <ul>
50 that you need to be fetched. If you have a Latin-based51 <li><strong>Google Fonts:</strong> &ensp; <a href="http://www.google.com/fonts/specimen/Ubuntu">Normal &rsaquo;</a> &ensp; <a href="http://www.google.com/fonts/specimen/Ubuntu+Condensed">Condensed &rsaquo;</a> &ensp; <a href="http://www.google.com/fonts/specimen/Ubuntu+Mono">Monospace &rsaquo;</a></li>
51 website and only use regular and bold on a particular page,52 <li><strong>Typekit:</strong> &ensp; <a href="https://typekit.com/fonts/ubuntu">Normal &rsaquo;</a> &ensp; <a href="https://typekit.com/fonts/ubuntu-condensed">Condensed &rsaquo;</a> &ensp; <a href="https://typekit.com/fonts/ubuntu-mono">Monospace &rsaquo;</a></li>
52 use the following addition in your pages and then reload the page to test:</p>53 </ul>
5354 </div>
54 <ul>55
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 <div class="grid-12">
56 </ul>57 <div class="content-intro">
5758 <h2>Greater control</h2>
58 <h2>Greater control</h2>59 <p>If you need more control and better background loading then you may want to use the <a href="https://developers.google.com/fonts/docs/webfont_loader">Google WebFont Javascript loader</a>, if you’re looking for an example, visit <a href="http://www.ubuntu.com">www.ubuntu.com</a> and choose “View Source” in your browser!</p>
5960
60 <p>If you need more control and better background loading61 <h2>See also</h2>
61 then you may want to use the62 <p><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 <time datetime="2010-12-20">20 December 2010 (2010-12-20)</time>.</p>
62 <a href="http://developers.google.com/webfonts/docs/webfont_loader">Google63 </div>
63 WebFont Javascript loader</a>, if you're looking for64 </div>
64 an example,65 </div>
65 visit <a href="http://www.ubuntu.com/">www.ubuntu.com</a>66
66 and choose "View&nbsp;Source" in your browser!</p>67</div><!-- /#content -->
6768
68 <p>You can also combine multiple subsets, for example, combining Latin and Greek, or Latin and Cyrillic in the following example:</p>69</div><!-- /#header-and-content -->
6970
70 <ul>71<div id="footer" class="container-12">
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 <div class="grid-12">
72 </ul>73 <p>&copy; 2011 Canonical Ltd. Ubuntu and Canonical are registered trademarks of Canonical Ltd.</p>
7374 <a class="logo-ubuntu" href="../"><img src="../assets/img/logo-ubuntu-footer.png" width="118" height="27" alt="Ubuntu logo" /></a>
74 <h2>Further reading</h2>75 </div>
7576</div><!-- /#footer -->
76 <ul>77
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<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
78 </ul>79<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/jquery-ui.min.js"></script>
7980<script type="text/javascript" src="../assets/js/base.js"></script>
80 </div>81
81 </div>82</body>
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>83</html>
89

Subscribers

People subscribed via source and target branches