The Font Panel

Sparkle offers a one-click install for over 600 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 webfont index will result in an automatic download and immediate activation. When used, webfonts sourced from Google won’t be embedded in the website, rather, they will be loaded from Google’s servers. 

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 webfont 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 to pick as alternatives when each successive font doesn’t contain the text characters on the page. 

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, Georgia will be shown in Sparkle and most likely on any Mac system. However, on browsers running on Windows or Linux, Georgia is most likely not installed, so the browser will use Times or Times New Roman instead.

Please report any shortcoming in this documentation and we’ll fix it as soon as possible!

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. 

At least a TTF/OTF file is required to install a custom font. The “Font Family” and the “Font Full Name” fields are automatically filled from the font properties. EOT, WOFF and SVG files are optional, but recommended to maximize compatibility with older versions Internet Explorer (EOT) and older iOS versions (SVG).

This site uses cookies. Some are essential to make our site work; others help us improve the user experience. By using the site, you consent to the placement of these cookies. Read our privacy policy to learn more.