Coding Fonts Playground

Coding Fonts Playground

Hi there! I'm Wenting. I'm building Typogram, a beginner friendly logo design tool! ✨ Will I fail or succeed? Sign-up for my build-up-public newsletter to get the latest updates!


Yesterday, I wrote a tutorial about Retool, demoing a process to rebuild the Google Fonts website within 30 minutes. Retool’s Twitter account picked it up and shared it! I was pleased with the project and continued to hack around it today, even though I was not supposed to.

Seeing what Google Fonts API and Retool can do together, I came up with an idea to create a “Coding Fonts Playground” to help programmers pick coding fonts easily. My secret goal is to make a traffic magnet to promote my product and newsletters because my last growth hack project has been successful.

I had most of the functionalities done from yesterday’s tutorial piece. All I need to do is to:

  1. Filter the table to show monospaced fonts only.

  2. Add a code preview window.

I blazed through #1 by altering the data transformer in Retool:


I get stuck at #2. I wanted the code preview to look very fancy with syntax highlighting and color theme “Cobalt,” like what I had in my other project CSS Mono microsite:

I need to use javascript like prism.js to achieve syntax highlighting; however, I found out Retool blocked all javascript in the iFrame component. I have to write a custom Retool component using react.js to perform syntax highlighting. 

I entertained the direction for two hours until dinner time when I paused my work to cook. Cooking is a great time to think. It hits me: I just need a code preview window. Syntax highlighting adds flair, but it is hardly necessary. I could get #2 done in a few minutes, but instead, I spent hours!

After dinner, I wrapped up #2 with nothing fancy but <pre> <code> tags and simple CSS:

“If users like a particular font, they may want to download it.” I thought. So I added another requirement to the app feature list:

3. Add download fonts button

It surprised me how little it takes to add such a crucial feature. I just add a button to open this link:{{encodeURIComponent(}}

You can play with my current progress at my github.

So there it is my story: what I spent most of my day doing is essentially worthless, and what I spent 5 mins doing makes the app become useful. It is a real-life example of the 80/20 rule 80% of the value to the customer comes from 20% of the effort, and vice versa!

What I could do better next time: prioritize and put my effort into high return over investment features. Because it is a fun mini-project, I let go of product management and work rather linearly. 

I was also overly stubborn on getting the syntax highlighting to work. I started to implement it because it was easy to do last time, thinking it would be low-hanging fruit. I forgot to re-adjust my plan when I found out it was not easy because of how Retool handles iFrame. I got lost in my train of thought and was mindlessly fixated to get it to work.

Have you had similar moments? Let me know your story! 

If you enjoyed the posts here, subscribe to get updates from Typogram's blog!