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
1=== modified file 'index.html'
2--- index.html 2013-03-26 10:32:42 +0000
3+++ index.html 2013-04-18 21:19:40 +0000
4@@ -83,7 +83,7 @@
5
6 <div class="grid-4 border-right" itemprop="significantLinks">
7 <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" />
8- <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>
9+ <p><a href="./web">Want to use the Ubuntu Font Family on the web? &rsaquo;</a></p>
10 </div>
11
12 <div class="grid-4">
13
14=== modified file 'web/index.html'
15--- web/index.html 2013-03-26 10:32:42 +0000
16+++ web/index.html 2013-04-18 21:19:40 +0000
17@@ -1,89 +1,83 @@
18+<!DOCTYPE html>
19 <html>
20- <head>
21- <title>Ubuntu Webfonts - Ubuntu Font Family</title>
22- <link rel="stylesheet" type="text/css" href="../assets/styles.css" />
23- </head>
24- <body>
25- <div id="wrapper">
26- <div id="header">
27- <a href="http://www.ubuntu.com"></a>
28- </div>
29- <div id="main">
30- <h1>Ubuntu Font Family <span>on the web</span></h1>
31- <div id="content">
32-
33- <p>You can now use the <a href="../">Ubuntu Font
34- Family</a> <strong>as a webfont</strong> via the
35- CSS <code>@font-face</code> mechanism, this
36- has <a href="https://launchpad.net/bugs/655305">been
37- supported</a> since 21 December 2010 via the Google Font
38- API. The Google Font API is a cross-browser system that
39- allows visitors to see the clarity and beauty of the Ubuntu
40- Font Family your websites, without having to worry about
41- what fonts they have installed locally.</p>
42-
43- <p>A compressed and optimised version of the requested font
44- is automatically downloaded via the web, and encoded into
45- the right format for each specific browser. This means
46- takes the worry out of needing to provide and update all the
47- versions (TTF, EOT, WOFF, SVG) needed by today's browsers.</p>
48-
49- <p>To use the Ubuntu Font Family on the websites you
50- maintain, select the "<strong>Ubuntu</strong>" in the Google
51- Font Directory and copy the few lines of code shown.</p>
52-
53- <ul>
54- <li>Visit the <a href="http://www.google.com/webfonts/">Google Font Directory</a></li>
55- </ul>
56-
57- <p>Enabling the site can be as simple as adding two lines to
58- the <code>&lt;head&gt;</code> section of the HTML pages or
59- templates (or one line if you are already requesting
60- '<code>Ubuntu</code>' as the font-family!). First choose the
61- font just as you would do normally:</p>
62-
63- <ul>
64- <li><code>&lt;style&gt;body { font-family: Ubuntu, sans-serif; }&lt;/style&gt;</code></li>
65- </ul>
66-
67- <p>Then use the Google Font API magic to enable the styles
68- that you need to be fetched. If you have a Latin-based
69- website and only use regular and bold on a particular page,
70- use the following addition in your pages and then reload the page to test:</p>
71-
72- <ul>
73- <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>
74- </ul>
75-
76- <h2>Greater control</h2>
77-
78- <p>If you need more control and better background loading
79- then you may want to use the
80- <a href="http://developers.google.com/webfonts/docs/webfont_loader">Google
81- WebFont Javascript loader</a>, if you're looking for
82- an example,
83- visit <a href="http://www.ubuntu.com/">www.ubuntu.com</a>
84- and choose "View&nbsp;Source" in your browser!</p>
85-
86- <p>You can also combine multiple subsets, for example, combining Latin and Greek, or Latin and Cyrillic in the following example:</p>
87-
88- <ul>
89- <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>
90- </ul>
91-
92- <h2>Further reading</h2>
93-
94- <ul>
95- <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>
96- </ul>
97-
98- </div>
99- </div>
100- <div id="footer">
101- &copy; 2010 Canonical Ltd. Ubuntu and Canonical are
102- registered trademarks of Canonical Ltd.
103- </div>
104- </div>
105- </body>
106+<head>
107+<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
108+
109+<title>Web | Ubuntu Font Family</title>
110+
111+<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Ubuntu:400,400italic,700">
112+<link rel="stylesheet" type="text/css" media="screen" href="../assets/css/reset.css" />
113+<link rel="stylesheet" type="text/css" media="screen" href="..//assets/css/960.css" />
114+<link rel="stylesheet" type="text/css" media="screen" href="..//assets/css/base.css" />
115+
116+</head>
117+
118+<body class="licence">
119+
120+<div id="header-and-content" class="container-12">
121+
122+<div id="header" class="clearfix">
123+ <div class="grid-12">
124+ <ul>
125+ <li><a href="../">Home</a></li>
126+ <li><a href="../about">About</a></li>
127+ <li><a href="../gallery">Gallery</a></li>
128+ <li><a href="../licence">Licence</a></li>
129+ <li><a href="../resources">Resources</a></li>
130+ </ul>
131+ <a class="logo-ubuntu" href="../"><img src="../assets/img/logo-ubuntu-header.png" width="118" height="27" alt="Ubuntu logo" /></a>
132+ <h2><a href="../">Font Family</a></h2>
133+ </div>
134+</div><!-- /#header -->
135+
136+<div id="content" class="clearfix">
137+
138+ <div class="grid-12">
139+ <div class="content-heading">
140+ <a class="link-action" href="../download/ubuntu-font-family-0.80.zip">Download for free &rsaquo;</a>
141+ <h1>Ubuntu Font Family on the web</h1>
142+ </div>
143+ </div>
144+
145+ <div class="grid-12">
146+ <div class="content-intro">
147+ <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>
148+
149+ <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>
150+ </div>
151+
152+ <div id="resources">
153+ <ul>
154+ <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>
155+ <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>
156+ </ul>
157+ </div>
158+
159+ <div class="grid-12">
160+ <div class="content-intro">
161+ <h2>Greater control</h2>
162+ <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>
163+
164+ <h2>See also</h2>
165+ <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>
166+ </div>
167+ </div>
168+ </div>
169+
170+</div><!-- /#content -->
171+
172+</div><!-- /#header-and-content -->
173+
174+<div id="footer" class="container-12">
175+ <div class="grid-12">
176+ <p>&copy; 2011 Canonical Ltd. Ubuntu and Canonical are registered trademarks of Canonical Ltd.</p>
177+ <a class="logo-ubuntu" href="../"><img src="../assets/img/logo-ubuntu-footer.png" width="118" height="27" alt="Ubuntu logo" /></a>
178+ </div>
179+</div><!-- /#footer -->
180+
181+<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
182+<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/jquery-ui.min.js"></script>
183+<script type="text/javascript" src="../assets/js/base.js"></script>
184+
185+</body>
186 </html>
187-

Subscribers

People subscribed via source and target branches