two fonts in a scrollbox

HTML

<style>
@font-face {
font-family: lovely;
src: url(https://dl.dropbox.com/s/xde2bkhiie1bm8r/LovelyRegular.ttf);
}
@font-face {
src: url(https://dl.dropbox.com/s/kp4x66rhekt1fz5/AdabelleHandwriting-Regular.ttf);
font-family: adabelle;
} 

#scroll {
height: 100px;
width: 100px;
padding: 10px;
border: 4px double black;
border-radius: 8px;
font-size: 18px;
overflow: auto;
font-family: lovely;
}
 
</style>
<div id="scroll">
text text text text text text text  
<span style="font-family: adabelle;">text text text text text text text text text text text text text text text text text text text text text text text </span>  
</div>