Use Google Fonts in your projects - setWebFonts()

[Clifton]

WHY USE WEB FONTS IN YOUR PROJECTS?

1. Web fonts establish consistency (and predictability) in your page layouts between all devices and browsers.
2. Web fonts make viewing your content exciting, interesting, and engaging for readers/learners.

The PowerPac makes it easy to style your ToolBook pages with any of the many web fonts available in Google Fonts repository. The PowerPac also permits using web fonts generated with the Font Squirrel font generator. In the latter case, you simply upload your preferred TTF fonts to font squirrel and the site will generate the CSS and convert your TTF (True Type) fonts for use in any browser.

Example:

DOWNLOAD THE SOURCE FILES FOR THE ABOVE DEMO:

SOURCE.zip

DEMO files including CSS and webFonts (tbk v11.5; other versions upon request)

(850.43 KiB) Downloaded 564 times

NOTE: The above demo uses the new PowerPac page transition feature.
To review how to setup page transitions, please visit this topic: viewtopic.php?f=2&t=242

How to Use Google Web Fonts:

1. Select the Google Fonts from the Google Font repository:
   https://fonts.google.com/
2. Download the TTF versions of your selected fonts and install them on your local computer for use when authoring your ToolBook project. This will help you get an idea where your text line breaks will occur.
3. Locate the @import CSS rule for the Google Fonts you have selected and copy it into a new CSS document.
4. Create CSS classes in your document that refer to the Google fonts.
5. Call the PowerPac function setWebFonts() on load page and set the function to install your CSS document and bind your classes to the objects you want to use the Google fonts.

Example of the Google Web Font CSS Document used in the demo above:

Notice how simple this is to set up! Just a few lines of CSS is all that is needed.

On load page, we call setWebFonts() as many times as necessary to apply the font classes to our page objects.
Here is an example wherein we called setWebFonts() to load the CSS and apply the Macondo type class to the Title field.

Loading the fonts and apply the classes

Image 1.png (8.95 KiB) Viewed 8458 times

Since we set all fields using web fonts to hidden on load page, we set the parameter notifyOnLoad to send an on user event to an object called myWebFonts. The user event for this object simply calls pgAnimateCSS() to fade in the fields when all the fonts have been loaded and the classes applied. How you implement the effects and manipulate the fields in your projects is entirely up to you.

HAVE FUN WITH THE WEB FONT FEATURE OF THE POWERPAC.
CSS Templates are provided in v13.181+ beta that make setting up Google Fonts or Font Squirrel generated fonts easy for all. However, the web font features of the PowerPac have been available in all production versions of the product.

If you prefer to use the Font Squirrel font kit generator:
https://www.fontsquirrel.com/
In addition, examine the CSS in the Demo SOURCE files to see how to modify the font squirrel CSS for ToolBook usage. It is a bit different than the one for Google Fonts. As shown in the demo, you can even combine the two font technologies into the same page or project.