Font-family not working in php

Question

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> 

Answer 1

Try this one..

<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-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" style="font-family:'.$key.'">' . $preview . ' - '.$data.' - ' . file_exists('fonts/'. $data) . '</span><br>';
   } ?>

</div>

Its because in the loop you are adding the font to the same class. And when the page gets loaded, the last font style in the loop gets applied. So instead of that, try adding the font-family as inline style.