Tutorials & Examples

Find out how to use CoolText, both via javascript & html, following the tutorials on these pages.

Using @font-face

Using @font-face, until the font file is loaded your texts are displayed with the fallback font family, causing two major problems:

1. letters sizes are not correctly calculated
2. you can see a FOUT (a Flash of Unstyled Text) effect

To avoid these two problems, we suggest you a technique based on Web Font Loader. If, for example, you want to use CoolText with 'Mystery Quest' Goggle web font, you should do what follows:

1. Make the text hidden

Use you css to hide the text you're going to animate setting the visibility property to hidden. You want to show the text as soon as the font is loaded.

2. Use the following javascript code

The following javascript code waits for both the document ready and fonts to load.

For more information about how to integrate other @font-faces and manage other situations, please visit Web Font Loader GitHub page.

Running Wordpress?

Check out our CoolText Wordpress Plugin