Google Fonts - Features - Sparky Docs - HotThemes

Search Form and Social Buttons

HotThemes Logo and Top Menu

Google Fonts contains a collection of hundreds of fonts. They are hosted on Google’s servers. You can use any of these fonts on your site for free. More info about this service on fonts.google.com.

Before you can select a Google font in any of your text styles, you should include it from this sub tab first. You can browse all Google fonts and see how they look directly from this sub tab.

Note that each font should be downloaded to your computer before showing in this sub tab. If you are displaying too many fonts, it may take time until all the fonts are downloaded. Also, it’s consuming memory and could make your browser responds slower. Therefore, it’s recommended to use one or more available filters to avoid too long list of fonts.

Google Fonts

Categories

Google fonts are categorized in 5 categories depending of the font type. The available font types are: display, handwriting, monospace, sans-serif and serif. You can select one or more categories here and all fonts from this category (or categories) will be listed below. For each font, you will see a sample text that shows all characters written in this font.

Subsets

Each font may contain one or more subsets. Which subset you need depends of the language of your site. In example, some languages require just simple latin subset. On the other hand, some languages require special characters included in the latin-ext (extended) charset. Also, there are languages based on Cyrillic subset, Greek subset, Arabic subset, and many others.

Not all Google fonts are available in all subsets. Keep that in mind when you are selecting a font. So, if your language require a specific subset, you can list only Google fonts that include this subset. Select a subset your language needs from the drop-down menu and also select one or more categories. Now, Sparky will list only fonts that include subset you need.

Search (by Font Name)

If you found a font that you like on Google Fonts website and you know the font name, you can simplify your search by entering the font name (full name or partial name) into the search field. Click the small magnifier icon or hit enter and Sparky will show only the fonts that contain this word in their names.

Adding a Font

Adding Google Fonts

When you found a font that you’d like to use in your text styles, click on the font container and it will change the color from gray to black.

Next, since each font may have multiple styles and multiple subsets, you should select which styles and which subsets you are including. Do not include something that you will not use on your site because it will slow down loading of your site unnecessary.

Click on the Styles link inside the container. Below the font’s container, all available styles of the font would be listed. It allows you to select one or more font variants (each with different weight and/or style). To select one or more variants, select the appropriate checkboxes.

To include one or more charsets of the selected font, click the Charsets link inside the container. The list of all charsets available for this font will open. Select one or more charsets.

Finally, click the Add Font button below. Your font will be added to the list and your Sparky’s template options will be saved automatically. You will be able to select this font in all sections of the Sparky Framework that have parameters related to text. Beside that, you can use this font in your custom CSS stylesheet (read section Custom CSS and JavaScript).

Removing a Font

Removing Google Fonts

Loading of unused fonts slows down your site unnecessarily. If you are not using a Google Font in any of your text styles nor anywhere in your site, you can safely remove it.

To remove one or more Google fonts, select them from the list of included fonts and click the Remove Fonts button. The selected font(s) will be removed and your Sparky’s template options will be saved automatically.

Sample

Google Fonts Sample

3 different Google fonts included for logo, top menu and carousel. This sample is from Beer template. This template is available for all premium members.

Links, Partners and Social Media