Font-family not working in php

I'm trying to create a font preview but I can't get the font to change. When I run the code shown below, the output is

my Text - Arial.ttf - 1 my Text - Batman.ttf - 1 my Text - Verdana.ttf - 1

So the font is being found. It just isn't working. If I replace the key/data with an actual name, like Batman and Batman.ttf, it works, though every line is in that font. Any ideas on why this is not working?

<div>
<?php 
$fontlist['Arial'] = 'Arial.ttf';
$fontlist['Batman'] = 'Batman.ttf';
$fontlist['Verdana'] = 'Verdana.ttf';

$preview = 'my Text';

foreach ($fontlist as $key => $data) {   ?>

   <style>
   @font-face {font-family:<?php echo $key; ?>; src: url(fonts/<?php echo $data; ?>); }  
   .headerText {font-family:<?php echo $key; ?>; font-weight:bold; font-style:none; font-size:40px; padding:10px 0; text-align:center;    
                width:100%; color:rgb(204,204,204); overflow-x:auto; overflow-y:hidden; white-space:nowrap; height:auto                                 
               }                      
   </style>
   <?php
     echo  '<span class="headerText">' . $preview . ' - '.$data.' - ' . file_exists('fonts/'. $data) . '</span><br>'; 
   } ?>

</div>