Access files out side public_html folder ?

Hi all

I have this demo here to explain the problem I have

http://www.ttmt.org.uk/

This a app to test font by selecting the text, weight and size.

The image is created by capturing the values with jQuery
and passing them to a PHP script that uses the GD Library.

At the moment the fonts are contained in a folder in the public_html folder.

My problem is the fonts in the this location could be downloaded by anyone simple by viewing the html
and - THE FONTS HAVE TO BE SAFE AND CAN'T BE DOWNLOADABLE.

I was thinking I could have the fonts outside the public_html folder so no one could download them but I can't
get this to work.

Is there anyway I could contain the fonts outside the public_html folder and still use them?

Is there any other way I can have the fonts files not downloadable but this useable by the script.

Any help would be greatly appreciated.

t.

Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  <meta name="robots" content="noindex, nofollow" />
  
	<title></title>
	<style type="text/css" media="screen">
	 *{margin:0;padding:0;}
	 #content{margin:20px;}
	 form{margin:0 0 20px 0;}
	 #inputText{width:300px;}
	 #selectText,#inputText{width:200px;}
	</style>
  
</head>

<body>
  
  <div id="content">
    
    <form method="" action="" id="testerForm">
      
      <select name="text" id="selectText" class="input">
        <option value="">Text</option>
        <option value="0123456789">0123456789</option>
        <option value="The quick brown fox jumps over the lazy dog">The quick brown fox jumps over the lazy dog</option>
        <option value="Fjord Nymphs XV beg quick waltz">Fjord Nymphs XV beg quick waltz</option>
      </select>
      
      <select name="size" id="selectWeight" class="input">
        <option value="">Weight</option>
        <option value="CORBEL.TTF">Regular</option>
        <option value="CORBELI.TTF">Italic</option>
        <option value="CORBELB.TTF">Bold</option>
        <option value="CORBELZ.TTF">Bold Italic</option>
      </select>
      
      <select name="size" id="selectSize" class="input">
        <option value="">Size</option>
        <option value="40">40</option>
        <option value="60">60</option>
        <option value="84">84</option>
        <option value="108">108</option>
      </select> 
      
    </form>
    
    <div class="fontTester">
    
    </div>  
    
  </div><!-- #content -->
  
  

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
  
  <script type="text/javascript" charset="utf-8">
  
    var fontfile = "fonts/corbel/"
    
    window.theText = "Test Text";
    window.theSize = 50;
    window.theFont = fontfile+"CORBELB.TTF";
    
    text = window.theText;
    size = window.theSize;
    font = window.theFont;
  
    dataString = 'text=' + text + '&size=' + size + '&font=' + font;
    $(".fontTester").find("img").remove();	
    $(".fontTester").html("<img src='sample.php?" + dataString + "' class='fontTesterImg' />");
    $(".fontTesterImg").hide().fadeIn(800);
  
    $('.input').change(function(){

      if($('#selectText').val() != ''){
    	  text = $('#selectText').val();
      }else{
    		text = window.theText;
    	}
    	if($('#selectSize').val() != ''){
    		size = $('#selectSize').val();
      }else{
    		size = window.theSize;
    	}
    	if($('#selectWeight').val() != ''){
    		var fontVal = $('#selectWeight').val();
    		font = fontfile + fontVal;
      }else{
    		font = window.theFont;
    	}
      dataString = 'text=' + text + '&size=' + size + '&font=' + font;
      $(".fontTester").find("img").remove();	
      $(".fontTester").html("<img src='sample.php?" + dataString + "' class='fontTesterImg' />");
      $(".fontTesterImg").hide().fadeIn(800);
    })
    

  </script>  
</body>
</html>