Show HN: Type Zebra - Test your fonts in a web browser | Hacker News Reader

Show HN: Type Zebra - Test your fonts in a web browser

typezebra.com

46 pointssushi32 comments

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.

Off to a great start though, thanks for sharing!

Multiple fonts and search for text is something I'd love myself. I just wanted to release the app quickly.

It will be added in the next version. Pinky promise!

Awesome. Can't say a negative word about shipping early! Congrats :)

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.

You should add a "gallop" button that randomly changes the font every N seconds (maybe with a slider control to select N).

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.

Not functional without Flash:

"You don't have a compatible version of Flash installed. Please install latest version of Flash and refresh this page."

Yes, there was no way to detect fonts on your computer without using Flash.

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.

[1] https://github.com/typekit/webfontloader.git

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.

Why do I need flash to look at fonts?

http://www.imgur.com/mup4T.png

You really need a better fallback than NOPE these days when it comes to flash.

Just to be clear, Flash is being used to "detect" fonts on your computer.

As a user, not having flash made the whole thing useless, not just the parts that actually depended on flash.

This is pretty awesome. It's nicer than http://www.google.com/webfonts

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.

I didn't even notice that until you mentioned.

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.

I built something along the same lines a while back that allows you to drag and drop font files into the browser. http://fontdragr.com

Also has a bookmarklet so you can test them on your own site.

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.

Would be more helpful if the fonts on the left sidebar were displayed in their native font (a la Photoshop).

Nice suggestion.

I'll have to dig more into the code which detects fonts but I hear you.

I've been up to my ears in PLT lately, so I did a bit of a double take on the name of the project.

An auto-suggest Search at top of list of fonts would be helpful.

It will be added soon. You can stay updated by following on twitter: https://twitter.com/typezebra

cool, just what i needed for testing my new website fonts

itd be great to preview multiple fonts simultaniously

Multiple font panes will be supported in the next version.

I can't get past "Loading your fonts" on Chrome.

Can you tell me which Chrome version and OS are you using? You can also contact me on typezebra@sushaantu.com if you want to send some screenshots.

Same problem here, Chrome Version 23.0.1271.97 m + Windows 7 64bit.

Edit: Had to enable flash in order to make it work

Yes, Flash is required to "detect" all the fonts on "your" computer.

All the fonts being displayed are installed on your computer. This app just provides a great way to view those fonts.

Reply on news.ycombinator.com