touble using @font

I'm using Apache on Linux. I'm having trouble using @font. I have the following html:

<html>
<head>
<style type="text/css">
@font-face {
  font-family: MICRW2;
  src: url(include/micr-W2.ttf);
}
</style>
</head>
<body>
<span style="font-family: MICRW2; font-size: 20pt">abcdg 012345678</span>
</body>
</html>

Open in new window


The above does not work in IE10 or firefox.  For IE I've tried using the font file micr-W2.eot, but that doesn't work either.

I get the following in access_log:
76.181.71.153 - - [25/Sep/2013:20:39:18 -0400] "GET /office/testfont.html HTTP/1.1" 200 224
76.181.71.153 - - [25/Sep/2013:20:39:18 -0400] "GET /office/include/micr-W2.ttf HTTP/1.1" 403 1108

Open in new window


If I have the MICRW2 font installed on the Windows PC where I open the browser, the fonts render properly.

What am I doing wrong in my HTML?
LVL 1
MarkAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Dave BaldwinFixer of ProblemsCommented:
Most @font applications use at least 4 different fonts to cover all the browsers.  Here is a demo page and CSS I got from FontSquirrel for a font called alexbrushregular.  I found the the links to the fonts themselves need to be relative to the CSS file.  I always put them in the same directory as the CSS file.

HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.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"/>

	<title>Font Face Demo</title>
	<link rel="stylesheet" href="stylesheet.css" type="text/css" charset="utf-8">
	<style type="text/css" media="screen">
		h1.fontface {font: 60px/68px 'alexbrushregular', Arial, sans-serif;letter-spacing: 0;}

		p.style1 {font: 18px/27px 'alexbrushregular', Arial, sans-serif;}
		p.style2 {font: 18px/27px 'alexbrushregular', Arial, sans-serif;}
		
		#container {
			width: 800px;
			margin-left: auto;
			margin-right: auto;
		}
	</style>
</head>

<body>
	<div id="container">
		<h1 class="fontface">Font-face Demo for the alexbrushregular Font</h1>
	
	 

	<p class="style1">alexbrushregular - Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

	 

	<p class="style2">alexbrushregular - Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

		</div>
</body>
</html>

Open in new window


CSS
/* Generated by Font Squirrel (http://www.fontsquirrel.com) on June 19, 2013 03:44:12 AM America/New_York */

@font-face {
    font-family: 'alexbrushregular';
    src: url('alexbrush-regular.eot');
    src: url('alexbrush-regular.eot?#iefix') format('embedded-opentype'),
         url('alexbrush-regular.woff') format('woff'),
         url('alexbrush-regular.ttf') format('truetype'),
         url('alexbrush-regular.svg#FanwoodRegular') format('svg');
    font-weight: normal;
    font-style: normal;

}

Open in new window

0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
MarkAuthor Commented:
DaveBaldwin: Thanks!!! You led me to the solution. Your key phrase was,  "I always put them [fonts] in the same directory as the CSS file."

This didn't really seem right to me, but what the heck, I copied the font file to the same directory as the HTML file (I'm not using a CSS file for this) and got rid of the "include/" part of the url and, voila! it worked! But why? Is it really possible that this particular @font definition does not permit pathnames in its url() specification?

But then I realized that I have a tomcat security restraint on the include folder. So, I created an includePublic folder, copied the fonts there, and that worked!!!

So in the end my problem was that the directory containing the font files was not accessible from the Internet. Whew!

Thanks for the help!
0
Dave BaldwinFixer of ProblemsCommented:
You're welcome.  I tried using a path from the main HTML file but that didn't work.  When I removed the path it worked, I stopped working on it at that point.
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
HTML

From novice to tech pro — start learning today.