Custom Fonts

Let’s face it. Using web-safe fonts is plain and boring. New fonts are constantly being developed and often look better than web-safe fonts. You can search the web and find many sources for free and paid fonts. For instance, FontSpace and FontSquirrel offer a wide range of free fonts, while MyFonts and Fontspring provide premium paid (and some free) fonts. Once you have found a font you like, the problem is how to use that font in SiteSpinner and ensure the font is used in your visitor’s browser. Modern browsers use a CSS3 feature called @font-face, which allows you to specify a non-safe font for the browser. If the font is installed on the device, the browser will use it. If not, the browser will download the font (it will not installed on the device).

It’s important to note that SiteSpinner doesn’t natively support the CSS @font-face method. To harness the power of non-safe fonts within SiteSpinner, you’ll need to employ custom CSS code. Additionally, to view the font within SiteSpinner, you must first install it on your computer. A key point to remember: if SiteSpinner is open during the font installation, it won’t immediately appear in the Text Object font menu. You’ll need to restart SiteSpinner to ensure the newly installed font is detected.

Using CSS @font-face

To use a non-safe web font in a SiteSpinner-generated web page, open a Code object and set the code placement to “Header” (see Figure 1). The “Header” option ensures that the browser loads the font before it can use it on the page.

In the text entry field, enter the following boiler-plate @font-face code:

<style>
  @font-face {
    font-family: 'font-name';
    src: 'font-file-name',
         url('font-file-name);
  }
</style>

Since the font file is an external resource, you must manually upload it to your site’s root folder (refer to Tips->Uploading External Files).