Identify fonts on any websites with FontFace Ninja.

Axel Corjon
Aug 8, 2017 · 4 min read

Check out the improvments and new features of our third version.

📦 Wait, FontFace Ninja?

Fontface Ninja is a browser extension that let you inspect, try and buy font on any websites.

Basically, you’re visiting a website and you’re wondering what is this cool font they’re using, just click the ninja and BOOM: you get the font name, size, color, letter-spacing and link to download or buy it… and you can try the font without leaving your browser tab.

As font lovers we wanted to have a way to discover new fonts. Other browser extensions did not really suit our needs… so we created Fontface Ninja back in 2015, and a lot of people really liked it (thanks to all of you!)

✏️ Brand new UI

We wanted to rethink the extension from the ground up. Add more functionalities without making it looks bulky. We also wanted to add more compatibility, usability and performance.

We create a draggable popin, easy to put wherever you need it, so you can access any parts of the website (we also add a cool drag effect, but it’s only because we are nerds and animation addicts).

We also display a list of all the fonts used on the website you’re visiting, sorted by familly and weight, with prices or download links. You’ll get all that with a single click :)

👊🏻 Simpler, Better, Faster, Stronger

We did not just made a new design for fun. We needed to rebuild eveything to get more compatibility and performance.

Our old UI used to push the content of the website, which could lead to display issues (we were messing with the CSS after all…). The new version is way more compatible and easier to use.

We improved performances, we get the list of fonts, prices, clean names and font weights in a matter of milliseconds. The popin shown when you roll on a font is also faster.

🔍 Better font detection

We used to display the name declared in CSS … which could lead to a couple different problems :

  • Wrong name in CSS lead to wrong name displayed (ex: an helvetica font declared with font-family:’yolo’ will display “Yolo” as font name, fun, but not usefull at all).
  • Sometime the font displayed is not the one declared in CSS (when a loading error occured for example)

We wanted to step our game up, make something different that would really be better. So we started working on font formats, metadatas, and studied naming patterns to get our extension to another level. We also build a small prototype to test our theories.

The result, is a way better font detection and it’s more accurate than any other font detection extension.

🍰 Take a bite before buying the whole cake

One of our favorite features, is to be able to try a font without leaving the website you’re visiting. Therefore, we added some new features.

When you are checking up a font with FontFace Ninja, it’s so cool to test the font in the panel! You can check if the font works well for some specific text.

You can now try the font in a bigger size, generate pangrams (ex: “The quick brown fox jumps over the lazy dog”) and get the color of the text you clicked on.

🏆 More is, in fact, better

To provide you a link to buy a font, we add a lot more foundries and distributors. We now have 8 distributors, 8 independant foundries for a total of 57 521 font families… and we’re not done yet !

🚀 To infinity and beyond !

We still have a lot of stuff we want to do with FontFace Ninja :

  • Font detection improvment (we still can do better)
  • Add more independant foundries
  • Make it even faster
  • Mobile extension version
  • Exploring augmented reality
  • Check out with our users what features they want (you can give us feedbacks on twitter or slack)

But our next big move will be FontFace Dojo. We cannot tell you too much yet, but it’s gonna be great :) it works with FontFace Ninja, and the main feature will be bookmarking fonts. We should release it before the end of 2017. Stay tunned!

🙌🏻 Get FontFace Ninja right now!

✍🏻 About me

I’m the co-creator of FontFace Ninja. Also CEO and creative director at Fold. You can follow me on Twitter, Instagram or Linkedin.

If you have any questions on FontFace ninja, you can contact us by mail or join us on Slack :)

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade