Google Web Font in Fade Loop

Google Web Font in Fade Loop

I'm using the following to create a fade loop with Google Web Fonts (Loved by the King is the specific name of the font) ...

The jQuery ...
[code]
setInterval(function() {
$("#sayings :first-child").fadeOut('fast').next().fadeIn('fast').end().appendTo("#sayings");
},5000);
[/code]

The HTML (abbreviated) ...
[code]
<div id="sayings">
<div>"hello<br />world"</div>
<div style="display:none">"foo"</div>
</div>
[/code]

The first child div displays fine on load. Once the animation begins, however, the line breaks and kerning get jacked up and the text ultimately does not display at all (by about the third or fourth loop). I have removed the font css and replaced it with the web basics: Arial, Helvetica, Verdana, etc and get the same results so I don't know that this issue is specific to Google Web Fonts. I've set width and height for each of the child divs and the parent thinking they were somehow resizing during the animation. Same results. I'm using the same jQuery to animate divs populated with .jpgs without a problem, so I presume I need to do something different for text populated divs.

Suggestions?

Thanks in advance -
sleepydad

Addendum - I've been messing around with this since I posted the question to the forum, and have noticed that it has something to do with line breaks. When I enter a manual line break the animation goes haywire. When I remove them, it works fine. Sure would like to have the line breaks in there if someone can tell me how. Thanks again.