Snapfont lets you test Google and local fonts on any website

One of the most time-consuming processes in designing this website was testing different fonts to find ones that were both suitable for the content and looked good. It involved scouring through libraries like Google Fonts or Adobe Fonts, opening up the trunk of my website, throwing some code in and then editing some CSS before I finally got to see how fonts looked in situ.

Sure, Google Fonts and Adobe Fonts, as well as the websites of other digital type foundries, let you preview their fonts using your own text. But they don’t always give a good picture of how different font families look together, in different weights, colours and sizes. Testing fonts on your own website is always ideal, so to make the process more streamline, a Melbourne-based web developer named Shashwat Amin has developed a tool called Snapfont.

Snapfont is essentially an extension for the Chrome web browser that lets you apply Google and local fonts to live websites. Once installed, you simply navigate to the website you’d like to format and click the Snapfont icon to the right of the address bar. This opens a drop-down list containing over 900 font families from the Google Fonts library, along with fonts installed locally on your system.

There is a nifty two-letter preview of the fonts next to each option, however I would suggest using Google Fonts itself to choose the ones you’d like to test, as there are currently no search filters in Snapfont.

You can then apply the selected font throughout the visible webpage, or just to the headings. What makes Snapshot clever here is that it matches the weight and style of text (as specified in the webpage’s CSS) to the corresponding font in the selected family (or the closest match possible).

The extension is currently in a beta phase, so the full power of Snapfont is yet to be realised. Further, I encountered some hiccups in my own testing, where Snapfont was not able to recognise all of my system fonts. But for a quick way to test Google Fonts, this is a simple, lightweight solution, provided you use Chrome. According to the developer, future releases will allow you to load font files – i.e. OTF and TTF files – directly via drag-and-drop. There is also support planned for variable fonts.

Download Snapfont from the Chrome web store or, for the latest version, directly via the website.