FontPrep Google Chrome Extension

– 06/18/13

We just released a Chrome extension for injecting FontPrep fonts directly into any page.

This is really useful because it allows you to inject a font and inspect how it looks on a page without needing to code all of the fonts and all of the CSS into the page.

Before we start, make sure you have FontPrep installed and have the extension downloaded. Here’s a quick run-down on exactly how to use it.

Step 1: Copy the font’s ID

First off, click on the name of the font to copy that font’s ID to the clipboard. You’ll be plugging this ID into the Chrome extension.

copy id

Step 2: Paste in the ID and insert CSS selector

Next, click on the extension’s icon and paste in the font id and select which elements you’d like to apply the font to. You can use any valid CSS selector.

copy id

Step 3: Apply font and styles

Lastly, click apply and then low and behold, your font is applied to the given elements in the page.

copy id

We’ll be looking to extend the functionality of the extension over time. Hit me up on Twitter me with feature requests or any questions you may have.

Download extension