In Sparkle, you have access to over 1600 web fonts through Google's Web Fonts project, which you can install with just one click. Additionally, you can use system fonts or upload your own web fonts to Sparkle.

The font panel is where you control which fonts appear in the font menu. You can open the font panel by clicking the "+" button next to the font family menu in the text inspector.

In the font panel, you'll see all available fonts, with active ones marked by a green corner. Clicking on a font from Google's web font index will automatically download and activate it. These web fonts are embedded in your website for privacy and performance.

The top row of buttons in the font panel acts as filters for the displayed fonts. Switching to the active view is a quick way to deactivate fonts you no longer use, while switching to the not active view helps you find new fonts. The serif/sans/script/title button row helps in searching for specific typeface styles. Finally, the 3+ weights filter is useful for finding fonts that are more complete in terms of typographic weights.

While you can activate a system font from the main "All fonts" pane, system fonts provide advanced control over how the font will display across different browsers on various operating systems.

When you select a web font, the visual representation of each character is sent to the browser, which may increase download time. However, with system fonts, only the font name is communicated to the browser. While Sparkle will display the selected font, viewers might not have the font installed on their system.

System Fonts

The Sparkle "System Fonts" pane offers advanced control over how the viewing browser behaves 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'll likely only need to use this pane to tweak the built-in font stacks or provide font stacks for uncommon fonts.

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

Custom Fonts

Finally, the custom web font pane allows you to 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 accepts fonts in TTF, OTF, WOFF, or WOFF2 formats, generating the needed web-ready formats internally.