Use Google Fonts in your projects - setWebFonts()
Posted: Tue Mar 28, 2017 8:03 pmWHY USE WEB FONTS IN YOUR PROJECTS?
Example:
DOWNLOAD THE SOURCE FILES FOR THE ABOVE DEMO:
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:
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.
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.
- Web fonts establish consistency (and predictability) in your page layouts between all devices and browsers.
- Web fonts make viewing your content exciting, interesting, and engaging for readers/learners.
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 829 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:
- Select the Google Fonts from the Google Font repository:
https://fonts.google.com/ - 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.
- Locate the @import CSS rule for the Google Fonts you have selected and copy it into a new CSS document.
- Create CSS classes in your document that refer to the Google fonts.
- 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.
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 9231 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.