Then you need to adjust to grid to fit the wider typeface. See this screenshot of two of the fonts from the Clover_font_pack_1. The grids and characters are all positioned by hand.
I'm using one main font file, BWRoB_PTMono_10W_A.png which uses PTMono from http://www.paratype.com/public/ . This is placed in to the Illustrator file as in the above screenshot, saved as a PNG with anti-aliasing. Then I imported in to Photoshop and applied a gradient to it to closely match the colours of the theme background.
For the animations, I used a font named Space Age from http://www.dafont.com/space-age.font . The text is created, broken apart and animated in Cinema4D. I then render out the files as PNG with alpha mask before optimising them and renaming/numbering the files to make the desired sequence for Clover.
Thanks for the explanation and that's really helpful. BTW, I saw the two grids above, and the problem is that the width of the left grid is wider than right one, is there any problem when the width is changing? I mean the width of the png is different from the original one.I don't know if clover can recognize the wider png or narrow png.
I know Cinema4d, and have been studying it for about 2 year, which is a really powerful tool.