Using Google Fonts

Owned by Ray Pearce (Unlicensed)
Last updated: Jan 12, 2015
2 min read

Part of creating POCs and Pilot answerSpaces involves being able to customise the look and feel of the answerSpace. Full instructions on this will be available in an upcoming course - Styling Your answerSpace. However, simply put, you can create your own CSS files and upload them into the answerSpace vis the Assets Manager. One of the things that can really impact the look of your answerSpace, is being able to use custom fonts. 

Note: This does add more download time to the initial boot, so try to stick to just one or two. Older browsers (like Blackberry 4/5 or IE 6) cannot use the font.

The largest provider of webfonts is Google Fonts. To use a Google Font, follow these steps:
Go to http://www.google.com/webfonts  and find a font that you'd like to use. Click the "Quick-Use" button:


In the Quick Use window, choose your variants (the checkboxes), usually this will be "Regular" or "Bold" but some fonts have many more variants.
In the example  HTML, copy the full contents of the "href" attribute within the quotes:


Paste this URI into Interaction Manager -> answerSpace Setup -> Advanced -> Load External CSS.
In the example CSS, copy the "font-family" line:


When the answerSpace loads, it will download the free font from Google, and it will be available for use in any style. Paste this into an appropriate style box in the Interaction Manager, eg  the answerSpace level for a complete look overhaul or "background style" for a particular Category or Interaction. Remember about the inheritance principle learned in 100-Welcome to the BlinkMobile Platform.

Ensure that the default Platform styles that you wish to change, are accurately coded in additional CSS, placed where it will affect your desired Interactions or Categories. The example below has been shown at the Category level:

Resulting in this:

Combined with a different colour-scheme, and CSS3 attributes, you can fully customise the look of a standard answerSpace so that it accurately reflects the identity of your organisation or customer branding.

See this example here .

 A Warning About Google Fonts

Some Google web fonts can conflict with your system fonts and/or the BlinkMobile Platform fonts. If they conflict with the Platform fonts, the indication will be that the font will not be applied (check your Inheritance settings first) or any styling you have done on your answerSpace will be removed.

Some fonts known to cause conflicts are shown below. They may not cause Platform conflicts all the time, and this is not a complete list.  We would appreciate knowing of any other font conflicts you find:

  • Andika
  • Cabin
  • Cantarell
  • Cousine
  • MedievalSharp
  • Open Sans
  • Oxygen
  • PT Sans
  • Rancho
  • Source Code Pro
  • Sorts Mill Goudy