diff options
Diffstat (limited to 'index.html')
| -rw-r--r-- | index.html | 116 |
1 files changed, 99 insertions, 17 deletions
@@ -1,23 +1,106 @@ -<!DOCTYPE html> -<html> +<!doctype html> +<html lang="en"> <head> <meta charset="utf-8"> - <title>FFFFALLBACK</title> - <style type="text/css" media="screen"> - body { - color:#444; - font: normal normal normal 1em/1.5 'Helvetica Neue', Arial, Helvetica, sans-serif; - } - </style> + <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> + <title>FFFFALLBACK - A simple tool for bulletproof web typography.</title> + <meta name="description" content="Bulletproof web typography, bookmarklet, web fonts"> + <meta name="author" content="Josh Brewer"> + + <!-- Mobile viewport optimized: j.mp/bplateviewport --> + <meta name="viewport" content="width=device-width, initial-scale=1.0"> + + <link rel="shortcut icon" href="/favicon.ico"> + + <script type="text/javascript" src="http://use.typekit.com/rbn4gdu.js"></script> + <script type="text/javascript">try{Typekit.load();}catch(e){}</script> + + <link rel="stylesheet" href="css/screen2.css"> + <!--[if lt IE 9]> + <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> + <![endif]--> </head> <body> - <hgroup> - <h1>FFFFALLBACK</h1> - <h2>A simple tool for bulletproof web typography.</h2> - </hgroup> - <p> - Coming soon. - </p> + <span class="horizon rising"></span> + <div id="main"> + <div class="content"> + <hgroup> + <h1>FFFFALLBACK</h1> + <h2>A simple tool for bulletproof web typography.</h2> + </hgroup> + + <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> + <p>So, in the spirit of bulletproof web design, we give you…</p> + + <div class="bkmrklt"> + <a href="#" id="bookmarklet" data-drag="Drag me! ➹">ffffallback</a> + <span>the bookmarklet!</span> + </div> + + <h3>Okay, so how do I use this thing?<a href="#caveat">*</a></h3> + <!--[if IE]> + <ol> + <li>Well… you don't. We noticed you are using Internet Explorer. Unfortunately, this tool doesn't work in IE at this time.</li> + <li>If you have Firefox or Chrome installed, please visit this page in either of those browsers and follow the instructions. </li> + <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> + </ol> + <![endif]--> + <ol class="steps"> + <li><strong>Drag</strong> the bookmarklet to your browser toolbar.</li> + <li>Go to the page you want to test and <strong>click</strong> the bookmarklet.</li> + <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. + <ol> + <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> + </ol> + </li> + <li>Bulletproof your font-stacks and <strong>rejoice</strong>!</li> + </ol> + <aside class="caveat"> + <p><strong>*</strong> Small caveat: this bookmarklet only works on webkit browsers (Chrome & Safari) or Firefox. We might get it working for IE and Opera if time permits. But I wouldn't hold your breath.</p> + </aside> + <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> + + + <footer> + <p><span class="clear"><a href="mailto:feedback@fallback.com">Questions, comments & feedback</a><span> · </span><a href="https://github.com/jbrewer/ffffallback">Fork it on Github</a></span> + 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> + <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> + <p class="tweet"> + <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> + <small>Tell the world about <span class="smcap">FFFFALLBACK</span>!</small> + </p> + </footer> + </div> + </div> + <span class="horizon setting"></span> + <script src="js/css_browser_selector.js" ></script> + <script> + var myURL = window.location.toString(); + var baseURL; + if(myURL.match(/\.html$/)) { + var urlChunks = myURL.split('/'); + baseURL = urlChunks.slice(0, urlChunks.length - 1).join('/') + } else { + baseURL = myURL; + } + if(baseURL.substring(myURL.length - 1) !== '/') { + baseURL += '/'; + } + var jsURL = baseURL + 'bookmarklet/ffffallback.js?r=' + Math.random(); + var cssURL = baseURL + 'bookmarklet/ffffallback.css?r=' + Math.random(); + var bookmarkletSource = 'javascript:' + +"(function() {\ + var scriptTag = document.createElement('script');\ + scriptTag.setAttribute('src', '" + jsURL + "');\ + var linkTag = document.createElement('link');\ + linkTag.setAttribute('href', '" + cssURL + "');\ + linkTag.setAttribute('rel','stylesheet');\ + document.body.appendChild(scriptTag);\ + document.body.appendChild(linkTag);\ +})();".replace(/\n/g, ' '); + + document.getElementById('bookmarklet').setAttribute('href', bookmarkletSource); + </script> <script type="text/javascript"> var _gaq = _gaq || []; @@ -29,7 +112,6 @@ ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); })(); - </script> </body> </html> |