Using Google Fonts

The easiest way to use non-safe web fonts is to use fonts hosted by Google . Google has hundreds of fonts organized by font family: Serif, Sans Serif, Display, Handwriting, and Monospace. The website is relatively easy to navigate, but if you need help, watch the first 2-minutes of this YouTube video. The remainder of the video details how to use the font on a website, but this is not important since SiteSpinner is your web design tool.

After selecting the desired font, you need to get two things from the web page outlined in the following paragraphs, so do not close the window before grabbing them.

Since SiteSpinner is a visual editor and not an HTML editor, you must install the desired Google font(s) on your computer to use it. If you have selected a single font family, click the “Download Family” button (it should be at the top of the web page). If you selected multiple font families, click the “Download All” button at the bottom of the page.

Opening the downloaded file will show a list of font files or multiple folders if multiple font families were selected. If the font is a variable font, there will be a folder labeled “static” in the zip file. SiteSpinner cannot use a variable font, so use the file(s) inside the “static” folder. Double-clicking a font file will open the Windows font installer window. You only need to install the file(s) with a “.ttf” or “.otf” file extension. After installing the font, that font name will be visible in the Text Editor Font Selection menu.

To use the desired font(s) on your web page, you must include some code to download the font(s) from the Google servers. Look on the right side of the Google fonts web page to find a section labeled “Use on the web”. Select the option “<link>” and click the “copy to clipboard” tool button at the bottom of this section. In SiteSpinner, open a Code Object, set the code placement to “Header”, and paste the clipped code.

Your page will always look correct on your computer because you installed the desired Google font. You can verify your web page uses the Google font by using a different computer or mobile device.