How to use the WebFonter

Below you will find a short tutorial on using the WebFonter.
If you can’t find the information you’re looking for, try the FAQ. If your question is still unanswered, or you just want to give us some feedback, please get in touch.

Getting started

First of all, install the extension or the bookmarklet. The former is the recommended option if you use the Chrome browser.

The extension can be installed from the Chrome store.

The bookmarklet is a special link. Here’s one right here: WebFonter. Drag it up to your bookmarks bar and drop it there. Now whatever page you browse to, you can click on this link in your bookmarks bar to start the WebFonter.

Choosing Targets

Every font swap has a “target” – defining which text elements within your page design you want to replace the font for. You can choose “Heading Font”, “Body Font” or “All”. You can also choose a font currently defined on the page, or, if you’re familiar with CSS, you can choose the “custom” option.

Changing Styles

To change a font style used for swapping just click on the image of the font to see a list of styles within the family.

Changing Families

To change the font family click on the big “Change Family” button which will open the a new font browsing window. Here you can search for families using family, foundry or designer names. You can also browse through listings of fonts according to typographical categories. If you see something you like, you can also click on the “find similar” icon to see some similar families or you can click on the star to mark it as a favorite. Once you’ve identified a family you’d like to preview in your page, simply click on it. Note that every time you do this, your choice will be added to the “Recent” tab of the font browsing window so you can always go back and review recent choices.

Tweaking your Swaps

Different families may need to be adjusted slightly to fit into your design. You can use the tweaking controls to adjust font size, line height and letter spacing.

Advanced: Custom Targets

If you’re familiar with CSS, or you just want to experiment, you can choose the “custom” target type. This opens the custom CSS selector window. You can either just type in some CSS or hit the “Pick” button to interactively select an element from the page.

Advanced: More than 2 Swaps

If you wish to preview more than two webfonts simultaneously or you’d like to define custom targets for different parts of your page you’ll need to be able to define more than 2 swaps. To duplicate a swap, just click on the little plus icon that appears on rollover, adjust the target and you're good to go.

Keyboard Shortcuts

ctrl-H to toggle WebFonter visibility (useful for making screenshots)

ctrl-T to toggle all the swaps.

Note that when using the “Launcher” you may have to click once somewhere inside the WebFonter window before keyboard shortcuts will work.