It's a brave new world. 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.
+
It's a brave new world. Web fonts are here, sparking an exciting new era in web design. Ffffallback makes it easy to find the perfect fallback fonts, so you can make sure your designs degrade gracefully. Fffallback means better layouts for everyone.
So in the spirit of bulletproof web design, we give you…
@@ -53,12 +51,12 @@
Small caveat: this bookmarklet only works on webkit browsers (Chrome & Safari) or Firefox. We are might get it working for IE and Opera if time permits.
-
Drag the bookmarklet to your browser toolbar.
-
Go to the page you want to test and click the bookmarklet to get started.
+
Drag the bookmarklet to your browser toolbar.
+
Go to the page you want to test and click the bookmarklet to get started.
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.
You can also add an input in order to change font-size, line-height, color, etc.
Tweet
- Tell the world know about FFFFALLBACK!
+ Tell the world about FFFFALLBACK!
--
cgit v1.2.3
From 2c8f2447a34d3f939d4d2febb47e06d6ba99cb54 Mon Sep 17 00:00:00 2001
From: Josh Brewer
Date: Mon, 18 Apr 2011 21:22:31 -0700
Subject: class should be an id
---
site/css/screen.css | 8 ++++----
site/index.html | 2 +-
2 files changed, 5 insertions(+), 5 deletions(-)
diff --git a/site/css/screen.css b/site/css/screen.css
index 91d78e8..fdf5afb 100644
--- a/site/css/screen.css
+++ b/site/css/screen.css
@@ -222,12 +222,12 @@ hgroup + p, hgroup + p + p {
max-width:25em;
}
-.bkmrklt {
+#bkmrklt {
font-size:1.3125em;
margin-bottom: 3em;
position:relative;
}
-.bkmrklt a {
+#bkmrklt a {
background:url(../images/bookmarklet-button.png) no-repeat 0 0;
border:0;
direction: ltr;
@@ -238,10 +238,10 @@ hgroup + p, hgroup + p + p {
height:57px;
width:215px;
}
-.bkmrklt a:hover {
+#bkmrklt a:hover {
border-bottom:0;
}
-.bkmrklt span {
+#bkmrklt span {
color:#eebe5f;
font-weight:200;
left: 11em;
diff --git a/site/index.html b/site/index.html
index 30e2931..031b15e 100644
--- a/site/index.html
+++ b/site/index.html
@@ -33,7 +33,7 @@
It's a brave new world. Web fonts are here, sparking an exciting new era in web design. Ffffallback makes it easy to find the perfect fallback fonts, so you can make sure your designs degrade gracefully. Fffallback means better layouts for everyone.
So in the spirit of bulletproof web design, we give you…
--
cgit v1.2.3
From 73285aee80f90c7b83a6014f8c4af1825d33b3f5 Mon Sep 17 00:00:00 2001
From: Josh Brewer
Date: Mon, 18 Apr 2011 21:24:26 -0700
Subject: class should be an id
---
site/css/screen.css | 8 ++++----
1 file changed, 4 insertions(+), 4 deletions(-)
diff --git a/site/css/screen.css b/site/css/screen.css
index fdf5afb..bc1e4d1 100644
--- a/site/css/screen.css
+++ b/site/css/screen.css
@@ -222,12 +222,12 @@ hgroup + p, hgroup + p + p {
max-width:25em;
}
-#bkmrklt {
+#bookmarklet {
font-size:1.3125em;
margin-bottom: 3em;
position:relative;
}
-#bkmrklt a {
+#bookmarklet a {
background:url(../images/bookmarklet-button.png) no-repeat 0 0;
border:0;
direction: ltr;
@@ -238,10 +238,10 @@ hgroup + p, hgroup + p + p {
height:57px;
width:215px;
}
-#bkmrklt a:hover {
+#bookmarklet a:hover {
border-bottom:0;
}
-#bkmrklt span {
+#bookmarklet span {
color:#eebe5f;
font-weight:200;
left: 11em;
--
cgit v1.2.3
From 8834e628c7403f7134ab672d45189f88eb54efcd Mon Sep 17 00:00:00 2001
From: Josh Brewer
Date: Mon, 18 Apr 2011 21:25:30 -0700
Subject: class should be an id
---
site/index.html | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/site/index.html b/site/index.html
index 031b15e..25ceea2 100644
--- a/site/index.html
+++ b/site/index.html
@@ -33,7 +33,7 @@
It's a brave new world. Web fonts are here, sparking an exciting new era in web design. Ffffallback makes it easy to find the perfect fallback fonts, so you can make sure your designs degrade gracefully. Fffallback means better layouts for everyone.
So in the spirit of bulletproof web design, we give you…
--
cgit v1.2.3
From a9619005677145cada41eab6547b6b9b17879f63 Mon Sep 17 00:00:00 2001
From: Josh Brewer
Date: Mon, 18 Apr 2011 21:28:06 -0700
Subject: class should be an id
---
site/css/screen.css | 8 ++++----
site/index.html | 4 ++--
2 files changed, 6 insertions(+), 6 deletions(-)
diff --git a/site/css/screen.css b/site/css/screen.css
index bc1e4d1..91d78e8 100644
--- a/site/css/screen.css
+++ b/site/css/screen.css
@@ -222,12 +222,12 @@ hgroup + p, hgroup + p + p {
max-width:25em;
}
-#bookmarklet {
+.bkmrklt {
font-size:1.3125em;
margin-bottom: 3em;
position:relative;
}
-#bookmarklet a {
+.bkmrklt a {
background:url(../images/bookmarklet-button.png) no-repeat 0 0;
border:0;
direction: ltr;
@@ -238,10 +238,10 @@ hgroup + p, hgroup + p + p {
height:57px;
width:215px;
}
-#bookmarklet a:hover {
+.bkmrklt a:hover {
border-bottom:0;
}
-#bookmarklet span {
+.bkmrklt span {
color:#eebe5f;
font-weight:200;
left: 11em;
diff --git a/site/index.html b/site/index.html
index 25ceea2..0f2b04d 100644
--- a/site/index.html
+++ b/site/index.html
@@ -33,8 +33,8 @@
It's a brave new world. Web fonts are here, sparking an exciting new era in web design. Ffffallback makes it easy to find the perfect fallback fonts, so you can make sure your designs degrade gracefully. Fffallback means better layouts for everyone.
So in the spirit of bulletproof web design, we give you…