Skip to content
Newer
Older
100644 117 lines (104 sloc) 6.14 KB
35ea8d1 moving new site out of site folder and last couple tweaks in prep for…
Josh Brewer authored Apr 19, 2011
1 <!doctype html>
2 <html lang="en">
e157d7c inital directory setup
Josh Brewer authored Mar 30, 2011
3 <head>
4 <meta charset="utf-8">
35ea8d1 moving new site out of site folder and last couple tweaks in prep for…
Josh Brewer authored Apr 20, 2011
5 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
6 <title>FFFFALLBACK - A simple tool for bulletproof web typography.</title>
7 <meta name="description" content="Bulletproof web typography, bookmarklet, web fonts">
8 <meta name="author" content="Josh Brewer">
9
51af7a2 block FF3 for bookmarklet, iphone scaling tweak
Josh Brewer authored Apr 20, 2011
10 <!-- <meta name="viewport" content="width=device-width, initial-scale=1.0"> -->
35ea8d1 moving new site out of site folder and last couple tweaks in prep for…
Josh Brewer authored Apr 20, 2011
11
12 <link rel="shortcut icon" href="/favicon.ico">
13
14 <script type="text/javascript" src="http://use.typekit.com/rbn4gdu.js"></script>
15 <script type="text/javascript">try{Typekit.load();}catch(e){}</script>
16
e7f47ff adding favicon
Josh Brewer authored Apr 19, 2011
17 <link rel="stylesheet" href="css/screen.css">
35ea8d1 moving new site out of site folder and last couple tweaks in prep for…
Josh Brewer authored Apr 20, 2011
18 <!--[if lt IE 9]>
19 <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
20 <![endif]-->
e157d7c inital directory setup
Josh Brewer authored Mar 30, 2011
21 </head>
22 <body>
35ea8d1 moving new site out of site folder and last couple tweaks in prep for…
Josh Brewer authored Apr 20, 2011
23 <span class="horizon rising"></span>
24 <div id="main">
25 <div class="content">
26 <hgroup>
27 <h1>FFFFALLBACK</h1>
28 <h2>A simple tool for bulletproof web typography.</h2>
29 </hgroup>
30
31 <p><span class="brave"><i>It's a brave new world.</i></span> <strong>Web fonts are here, sparking an exciting new era in web design. <span class="smcap">Ffffallback</span> makes it easy to find the perfect fallback fonts, so that your designs degrade gracefully.</strong></p>
32 <p>So, in the spirit of bulletproof web design, we give you&hellip;</p>
33
34 <div class="bkmrklt">
35 <a href="#" id="bookmarklet" data-drag="Drag me! ➹">ffffallback</a>
36 <span>the bookmarklet!</span>
37 </div>
38
39 <h3>Okay, so how do I use this thing?<a href="#caveat">*</a></h3>
40 <!--[if IE]>
41 <ol>
42 <li>Well… you don't. We noticed you are using Internet Explorer. Unfortunately, this tool doesn't work in IE at this time.</li>
43 <li>If you have Firefox or Chrome installed, please visit this page in either of those browsers and follow the instructions. </li>
44 <li>If you don't have either of those browsers installed, we strongly encourage you to download <a href="http://www.google.com/chrome/">Chrome</a> or <a href="http://firefox.com">Firefox</a> now!</li>
45 </ol>
46 <![endif]-->
47 <ol class="steps">
48 <li><strong>Drag</strong> the bookmarklet to your browser toolbar.</li>
49 <li>Go to the page you want to test and <strong>click</strong> the bookmarklet.</li>
50 <li>The bookmarklet will scan the CSS of the page in order to identify existing web fonts. Then, using magical unicorns and javascript rainbows, <span class="smcap">FFFFALLBACK</span> clones the page and provides a tool where you can test and analyze different fallback font choices.
51 <ol>
52 <li class="note">You can also toggle open an input in order to change font-size, line-height, color, etc. Remember to use <strong>!important</strong>, as it’s…well, you know, important.</li>
53 </ol>
54 </li>
55 <li>Bulletproof your font-stacks and <strong>rejoice</strong>!</li>
56 </ol>
57 <aside class="caveat">
58 <p><strong>*</strong> Small caveat: this bookmarklet only works on webkit browsers (Chrome &amp; Safari) or Firefox. We might get it working for IE and Opera if time permits. But I wouldn't hold your breath.</p>
59 </aside>
60 <p>For more background on how this came to be and why it's important, read <a href="http://blog.typekit.com/2011/03/24/type-study-choosing-fallback-fonts/">Type study: Choosing fallback fonts</a>.</p>
61
62
63 <footer>
aeba495 fixed wrong email address
Josh Brewer authored Apr 23, 2011
64 <p><span class="clear"><a href="mailto:feedback@ffffallback.com">Questions, comments &amp; feedback</a><span> · </span><a href="https://github.com/jbrewer/ffffallback">Fork it on Github</a></span>
35ea8d1 moving new site out of site folder and last couple tweaks in prep for…
Josh Brewer authored Apr 20, 2011
65 Handcrafted by <a href="http://twitter.com/jbrewer">@<span>jbrewer</span></a> and <a href="http://twitter.com/shinypb">@<span>shinypb</span></a>, with love, in San Francisco.</p>
66 <p><small>Extra big high-fives to the kind souls whose encouragement brought this to life: <a href="http://twitter.com/TrentWalton">Trent Walton</a>, <a href="http://twitter.com/TimBrown">Tim Brown</a>, <a href="http://twitter.com/Kyle">Kyle Sollenberger</a>, <a href="http://twitter.com/yarcom">Yaron Schoen</a> and <a href="http://twitter.com/aworkinglibrary">Mandy Brown</a>.</small></p>
67 <p class="tweet">
68 <a href="http://twitter.com/share" class="twitter-share-button" data-url="http://ffffallback.com" data-text="I'm using @ffffallback to help bulletproof my web typography. Check it out!" data-count="horizontal">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
69 <small>Tell the world about <span class="smcap">FFFFALLBACK</span>!</small>
70 </p>
71 </footer>
72 </div>
73 </div>
74 <span class="horizon setting"></span>
75 <script src="js/css_browser_selector.js" ></script>
76 <script>
77 var myURL = window.location.toString();
78 var baseURL;
79 if(myURL.match(/\.html$/)) {
80 var urlChunks = myURL.split('/');
81 baseURL = urlChunks.slice(0, urlChunks.length - 1).join('/')
82 } else {
83 baseURL = myURL;
84 }
85 if(baseURL.substring(myURL.length - 1) !== '/') {
86 baseURL += '/';
87 }
88 var jsURL = baseURL + 'bookmarklet/ffffallback.js?r=' + Math.random();
89 var cssURL = baseURL + 'bookmarklet/ffffallback.css?r=' + Math.random();
90 var bookmarkletSource = 'javascript:' +
91 "(function() {\
92 var scriptTag = document.createElement('script');\
93 scriptTag.setAttribute('src', '" + jsURL + "');\
94 var linkTag = document.createElement('link');\
95 linkTag.setAttribute('href', '" + cssURL + "');\
96 linkTag.setAttribute('rel','stylesheet');\
97 document.body.appendChild(scriptTag);\
98 document.body.appendChild(linkTag);\
99 })();".replace(/\n/g, ' ');
100
101 document.getElementById('bookmarklet').setAttribute('href', bookmarkletSource);
102 </script>
7f07f24 added analytics
Josh Brewer authored Mar 30, 2011
103 <script type="text/javascript">
104
105 var _gaq = _gaq || [];
106 _gaq.push(['_setAccount', 'UA-109790-10']);
107 _gaq.push(['_trackPageview']);
108
109 (function() {
110 var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
111 ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
112 var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
113 })();
114 </script>
e157d7c inital directory setup
Josh Brewer authored Mar 30, 2011
115 </body>
116 </html>
Something went wrong with that request. Please try again.