WebFontPicker lets you change the fonts on any website, replacing them with fonts from the Google Fonts↗ catalog.

It’s a tool for web designers/developers to try out fonts in context of their designs.

Genesis

This was my first JavaScript project. I had just read Eloquent JavaScript↗ and I was looking for a problem I could solve.

How it works

The font picker can be loaded on any website by clicking a bookmark. You can change the font for the entire website, or target specific elements using CSS selectors. All the fonts from the Google Fonts catalog↗ are available. Launch it here (or save this link as a bookmark) to try it out.

Implementation

Built with Backbone.js↗, Underscore↗ and jQuery↗. From an era when installing dependencies meant pasting source code into a /vendor directory.