Adobe Edge Fonts Previewer

Adobe recently released their Edge Fonts service, which contains over 500 freely available fonts for (unlimited) use, running all on the back of Typekit. If you’re interested in reading more about the situation, see here, here, or here.

The fact that they did this at all is a big leap forward for Adobe, so that’s awesome. BUT, the edgefonts.com site is weak in making it easy for people to browse all of the available fonts. As of writing this, the only place to preview the fonts is at the bottom of Adobe’s Edge Web Fonts page, which is displayed in a very unnatural, select-one-and-hope-it’s-cool kind of way:

A Solution (well, a start)

I wanted a way to browse many fonts at a time (like on typekit.com for instance), so I made a small project out of it and experimented with creating my own Edge Fonts previewer. Yeoman was also recently released, so I used this opportunity to try it out. Below are a list of the tools/frameworks I used:

If you’re interested in taking a gander at the code, head on over to the github repo. This is an early release just to get something out the door and I plan to add some more features and refine it overall.

Edge Font Previewer Github Repo

11 Responses to Adobe Edge Fonts Previewer

  1. Luke says:

    Love the font viewer. Thanks for the sharing your hard work. Don’t know what it would require but a nice future feature would be sorting by the styles: Sans Serif, Serif, Slab Serif, Script, Blackletter, Mono, Hand, Decorative.

    • Tony Stuck says:

      Yeah, I definitely agree—sorting by style would be great. At this point it would require me to manually go through and add the attribute to each font because edgefonts.com doesn’t provide that information. The way I pulled all of the fonts into my app was scraping the list on edgefonts.com via the WebKit console and transformed it into an array of JS objects, which I could then use.

  2. Thank you so much Tony, your work is very appreciated. Great job with the Previewer! :)

  3. sldx says:

    Great work indeed. Can’t wait for size adjustment and/or some kind of “paragraph mode”.

  4. Adam Gerberick says:

    Love it! I love Adobe’s drive in web fonts, but the lack of a font previewer is a BIG omission for a designer like me trying to make good choices–and not just take lots or millions of stabs in the dark to get something right.
    Previewer would move from helpful to indispensable if you could add font-size-adjusting! Possible? Soon? Pretty-please?

    • Tony Stuck says:

      It is a popular request :) .. I do apologize, I’m in the middle of moving across so things are a bit hectic. BUT I’m about to get on a 5+ hour flight, so I’ll see if I can knock it out today!

  5. jr0131 says:

    This is an amazing help. I am so grateful for your contribution and hard work. Thank you!

  6. Mark says:

    FYI, Adobe has a pretty full-featured viewer now: https://edgewebfonts.adobe.com/fonts

  7. PrasadSambari says:

    Awesome Work Tony, Thank you so much.

Leave a Reply

Your email address will not be published. Required fields are marked *