5 ms·

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

46 points by sushi 14y ago

raliste 14y ago
cool, just what i needed for testing my new website fonts
cleverjake 14y ago
itd be great to preview multiple fonts simultaniously
- sushi 14y ago
  Multiple font panes will be supported in the next version.
davidcollantes 14y ago
Not functional without Flash: "You don't have a compatible version of Flash installed. Please install latest version of Flash and refresh this page."
- sushi 14y ago
  Yes, there was no way to detect fonts on your computer without using Flash.
  - moonboots 14y ago
    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 https://github.com/typekit/webfontloader.git
    - sushi 14y ago
      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.
  - drivebyacct2 14y ago
    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.
  - hayksaakian 14y ago
    Why do I need flash to look at fonts? http://www.imgur.com/mup4T.png http://www.imgur.com/mup4T.png You really need a better fallback than NOPE these days when it comes to flash.
    - sushi 14y ago
      Just to be clear, Flash is being used to "detect" fonts on your computer.
      - hayksaakian 14y ago
        As a user, not having flash made the whole thing useless, not just the parts that actually depended on flash.
michaelmartin 14y ago
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!
- sushi 14y ago
  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!
  - michaelmartin 14y ago
    Awesome. Can't say a negative word about shipping early! Congrats :)
- paulmckeever 14y ago
  You could always try http://typecast.com 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).
  - michaelmartin 14y ago
    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.
dugmartin 14y ago
You should add a "gallop" button that randomly changes the font every N seconds (maybe with a slider control to select N).
- sushi 14y ago
  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.
etagwerker 14y ago
This is pretty awesome. It's nicer than http://www.google.com/webfonts http://www.google.com/webfonts
loceng 14y ago
An auto-suggest Search at top of list of fonts would be helpful.
- sushi 14y ago
  It will be added soon. You can stay updated by following on twitter: https://twitter.com/typezebra https://twitter.com/typezebra
dgurney 14y ago
Would be more helpful if the fonts on the left sidebar were displayed in their native font (a la Photoshop).
- sushi 14y ago
  Nice suggestion. I'll have to dig more into the code which detects fonts but I hear you.
ahrjay 14y ago
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 http://fontdragr.com Also has a bookmarklet so you can test them on your own site.
- fahrio 14y ago
  Hey, I am a fan of fontdragr. I also have something along the lines; http://wordmark.it 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.
jayferd 14y ago
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.
dbbolton 14y ago
I can't get past "Loading your fonts" on Chrome.
- sushi 14y ago
  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.
  - angry-hacker 14y ago
    Same problem here, Chrome Version 23.0.1271.97 m + Windows 7 64bit. Edit: Had to enable flash in order to make it work
    - sushi 14y ago
      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.
deleted 14y ago
[deleted]
uptown 14y ago
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.
- sushi 14y ago
  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.

46 points by sushi 14y ago

raliste 14y ago

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

cleverjake 14y ago

itd be great to preview multiple fonts simultaniously

sushi 14y ago
Multiple font panes will be supported in the next version.

davidcollantes 14y ago

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

sushi 14y ago
Yes, there was no way to detect fonts on your computer without using Flash.
- moonboots 14y ago
  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 https://github.com/typekit/webfontloader.git
  - sushi 14y ago
    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.
- drivebyacct2 14y ago
  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.
- hayksaakian 14y ago
  Why do I need flash to look at fonts? http://www.imgur.com/mup4T.png http://www.imgur.com/mup4T.png You really need a better fallback than NOPE these days when it comes to flash.
  - sushi 14y ago
    Just to be clear, Flash is being used to "detect" fonts on your computer.
    - hayksaakian 14y ago
      As a user, not having flash made the whole thing useless, not just the parts that actually depended on flash.

michaelmartin 14y ago

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!

sushi 14y ago
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!
- michaelmartin 14y ago
  Awesome. Can't say a negative word about shipping early! Congrats :)
paulmckeever 14y ago
You could always try http://typecast.com 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).
- michaelmartin 14y ago
  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.

dugmartin 14y ago

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

sushi 14y ago
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.

etagwerker 14y ago

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

loceng 14y ago

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

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

dgurney 14y ago

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

sushi 14y ago
Nice suggestion. I'll have to dig more into the code which detects fonts but I hear you.

ahrjay 14y ago

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 http://fontdragr.com Also has a bookmarklet so you can test them on your own site.

fahrio 14y ago
Hey, I am a fan of fontdragr. I also have something along the lines; http://wordmark.it 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.

jayferd 14y ago

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.

dbbolton 14y ago

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

sushi 14y ago
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.
- angry-hacker 14y ago
  Same problem here, Chrome Version 23.0.1271.97 m + Windows 7 64bit. Edit: Had to enable flash in order to make it work
  - sushi 14y ago
    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.

deleted 14y ago

[deleted]

uptown 14y ago

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.

sushi 14y ago
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.