Sparkle offers a one-click install for over 1600 web fonts as indexed by the Google’s Web Fonts project. You can also use system fonts or add your own web fonts to Sparkle.

The font panel is used to control the fonts displayed in the font menu. The font panel is opened by pressing the + button next to the text inspector font family menu.

From here all available fonts are shown, with the active ones badged with a green corner. Clicking on a font that is sourced from Google’s web font index will result in an automatic download and immediate activation. When used, web fonts sourced from Google will be embedded in the website for privacy and performance.

The top second row of buttons in the font panel acts as a filter on the displayed fonts. Switching to the active view is a quick way to deactivate fonts no longer used, while switching to the not active view helps in looking for new fonts. The serif/sans/script/title button row helps in searching with a specific typeface style. Finally the 3+ weights filter is useful for finding fonts that are typographically more complete. As a rule of thumb, using multiple weights and styles of the same typeface usually produces a more harmonious and elegant result than using different typefaces.

While activating a system font can be done from the main “All fonts” pane, the system fonts provide advanced control over how the font will be displayed across browsers running on different operating systems.

When a web font is picked, the visual representation of each character is transmitted to the browser, at the expense of download time. In the case of system fonts, however, just the font name is communicated to the browser. While Sparkle will display the selected font, the viewer might not have the font installed on their system.

The Sparkle “System Fonts” pane provides advanced control over how the viewing browser will behave when the named font isn’t found. This is known as a “CSS Font Stack”, which is a list of fonts listed in order of preference, for the visiting browser to load as alternatives, until one is found.

Sparkle has pre-defined font stacks for commonly used fonts, so you will likely only need to use this pane to tweak the built-in font stacks or provide font stacks for uncommon fonts.

In the example depicted above, Andale Mono will be shown in Sparkle and most likely on any Mac system. However, on browsers running on Windows or Linux, Andale Mono is most likely not installed, so the browser will use one of the fallbacks instead.

Finally, the custom web font pane lets you add a web font from your local system. When used in a website, the font files will be embedded as part of the site. Through this pane you can enter multiple weights for each font family, and they will be grouped as a single font.

Sparkle will accept a font in TTF, OTF, WOFF or WOFF2 formats, generating the needed web-ready formats internally.