In chrome, I'm not seeing the flash warning message. I'm only seeing an endless "Loading your fonts..." I have click-to-play flash enabled.
Webfontloader[1] uses javascript to detect whether a specific font is available. They use a hack where they change the font of a piece of text and calculate whether the width has changed, indicating the system is using specified font instead of the default serif or san serif. If you had a large list of fonts, you could filter out the ones the user has.
You'll have to enable flash for the website in order to use it. Since the flash element is hidden you can't click on it to play.
I'll check the library and see if I can use it. Being a JS noob I just patched up whatever I could find. I know there is lot of scope for improvement in code.
You should support Web Fonts and progressively enhance using local fonts if Flash is enabled. Also, add something for those of us that can't stand to use the web without Click-to-Enable feature in Chrome/Firefox.
Nicely done, I love how easy it is to flick between fonts instantly.
I would second cleverjake's comment that a neat way to see serveral fonts together would be awesome (Especially for a different headline font vs the body copy).
Also, a search for the big list of fonts would be handy too.
You could always try http://typecast.com for this, which allows you to preview and compare fonts from multiple web font providers (disclosure: I'm on the team there).
Haha, I actually thought of Typecast when I loaded up this site! (I'm from Belfast, not too many apps of that quality around here! :) )
A little ashamed to say that I haven't used it yet (I'm a developer more than a designer, so just haven't had the reason to try it out properly yet. I guess you shouldn't really need a reason to experiment though!), but it looks gorgeous and a really useful tool to have.
I think any kind of "surprise" is a bad UX.
The only exception is image sliders where images change randomly but then they are designed in such a way that it gives away the idea of randomly changing images.
Hey, I am a fan of fontdragr. I also have something along the lines; http://wordmark.it . I tried to implement a similar drag and load functionality but never got to finish it. Great work. Congrats and best of luck to typezebra too.
Cool tool. The down-arrow seems to jump every-other font on the list. It'd also be good if it automatically loaded the font as you pressed that key to go down the list so you could quickly pan through them all without a lot of clicking.
33 comments
[ 3.1 ms ] story [ 92.9 ms ] thread"You don't have a compatible version of Flash installed. Please install latest version of Flash and refresh this page."
Webfontloader[1] uses javascript to detect whether a specific font is available. They use a hack where they change the font of a piece of text and calculate whether the width has changed, indicating the system is using specified font instead of the default serif or san serif. If you had a large list of fonts, you could filter out the ones the user has.
[1] https://github.com/typekit/webfontloader.git
I'll check the library and see if I can use it. Being a JS noob I just patched up whatever I could find. I know there is lot of scope for improvement in code.
http://www.imgur.com/mup4T.png
You really need a better fallback than NOPE these days when it comes to flash.
I would second cleverjake's comment that a neat way to see serveral fonts together would be awesome (Especially for a different headline font vs the body copy).
Also, a search for the big list of fonts would be handy too.
Off to a great start though, thanks for sharing!
It will be added in the next version. Pinky promise!
A little ashamed to say that I haven't used it yet (I'm a developer more than a designer, so just haven't had the reason to try it out properly yet. I guess you shouldn't really need a reason to experiment though!), but it looks gorgeous and a really useful tool to have.
I'll have to dig more into the code which detects fonts but I hear you.
Also has a bookmarklet so you can test them on your own site.
Edit: Had to enable flash in order to make it work
All the fonts being displayed are installed on your computer. This app just provides a great way to view those fonts.
I was supposed to add code to change fonts with up and down keys but it was getting a bit complicated for JS noob like me so I dropped it for now.
It'll be added in next version for sure.