1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
|
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<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">
<!-- Place favicon.ico & apple-touch-icon.png in the root of your domain and delete these references -->
<link rel="shortcut icon" href="/favicon.ico">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<!-- CSS : implied media="all" -->
<link rel="stylesheet" href="css/screen.css">
<script type="text/javascript" src="http://use.typekit.com/rbn4gdu.js"></script>
<script type="text/javascript">try{Typekit.load();}catch(e){}</script>
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<span class="horizon rising"></span>
<div id="main">
<div class="content">
<hgroup class="ir">
<h1>FFFFALLBACK</h1>
<h2>A simple tool for bulletproof web typography.</h2>
</hgroup>
<p><strong><span class="brave"><i class="ir">It's a brave new world.</i></span> Web fonts are here, sparking an exciting new era in web design. While this new-found freedom can be intoxicating, the importance of dependable web typography can not be overstated.</strong></p>
<p>So in the spirit of bulletproof web design, we give you…</p>
<div class="bkmrklt">
<a href="#" id="bookmarklet">ffffallback</a>
<span>the bookmarklet!</span>
</div>
<h3>Okay, so how do I use this thing?</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]-->
<aside>
<p>Small caveat: this bookmarklet only works on webkit browsers (Chrome & Safari) or Firefox. We <strike>are</strike> might get it working for IE and Opera if time permits.</p>
</aside>
<ol class="steps">
<li>Drag the bookmarklet to your browser toolbar.</li>
<li>Go to the page you want to test and click the bookmarklet to get started.</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, FFFFALLBACK clones the page and provides a tool where you can test and analyze different fallback font choices.
<span class="note">You can also add an input in order to change font-size, line-height, color, etc.</span>
</li>
<li>Bulletproof your font-stacks and rejoice!</li>
</ol>
<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>
<span class="horizon setting"></span>
<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 know about FFFFALLBACK!</small>
</p>
</footer>
</div>
</div>
<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 || [];
_gaq.push(['_setAccount', 'UA-109790-10']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
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>
|
