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.
For more information about how to integrate other @font-faces and manage other situations, please visit Web Font Loader GitHub page.