@font-face is ok on local host, not on server

Hello:
I have two @font-face declarations in my .css file.  When I run my site from my localhost server, both declarations work.  When I run the site on our development server, only the .ttf font displays.  The .otf font does not display.  Even if I specify a different name for the font family (e.g. I specify sans-serif, FedraAltBook) the browser renders my text in default font.  Code is attached below, with comments.

Any ideas how to make both fonts display properly on the development server?

TIA, Dan
@font-face {
  font-family: Jerk;
  src: url(http://iforms.dev/istandard/assets/quick_end_jerk.ttf);
}
 
.FontFaceTest
{
    font-family: Jerk;
}
/* Including or excluding the format property makes no difference - font will not render */
/* Changing the font file name to get rid of the space, then declaring the url without single quotes makes no difference - font will not render */
@font-face {
  font-family: FedraAltBook;
  src: url('http://iforms.dev/istandard/assets/FedraSansAltPro Book.otf') format('opentype');
}
 
.FedraBook
{
    font-family: FedraAltBook;
}
 
/* This also does not render in either Jerk or FedraAltBook - the text renders in the browser default font
.FedraBook
{
    font-family: Jerk, FedraAltBook;
}
*/

Open in new window

DanWalterAsked:
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.

ccpjcCommented:
the same font needs to be installed on the remote machine in order to see it properly
0
DanWalterAuthor Commented:
ccpjc:
I disagree.  The point of @font-face is to allow the browser to download the fonts as needed.  Also, on the development server, NEITHER font is installed, yet quick_end_jerk.ttf renders correctly and fedra does not.

On the localhost machine, fedra is installed, but there is no code to have it loaded locally, e.g. src: local("Helvetica Neue Bold").  On the localhost machine, quick end jerk is NOT installed.  On the localhost machine, both fonts render properly.

Dan
0
abelCommented:
DanWalter is correct. However, @fontface is very hard to get correct, if at all. Considering using a library that makes your life easier and has been there already: http://typeface.neocracy.org/

I've not used it myself, but I've heard of many people that used it and that it worked well for.
0
Determine the Perfect Price for Your IT Services

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden with our free interactive tool and use it to determine the right price for your IT services. Download your free eBook now!

DanWalterAuthor Commented:
Just to test this out, I installed the fedra font on the development server.  It still does not render in the browser.

Dan
0
abelCommented:
Have you tried my suggestion?

Are you aware that your URL is ill-formed? You cannot use spaces in urls. If you want that, you need to replace them with "+" or with "%20". Better to not use spaces at all.
0
DanWalterAuthor Commented:
Abel:
I looked at the library web-site.  I am reluctant to go that route if I can get this to work correctly.  I updated the url to no avail.  In fact, I did have the file renamed at one point to exclude spaces and it still did not work.

Is there any problem with having two separate @font-face statements?  Do I need to do some sort of consecutive name/url properties in a single statement?

Dan
0
DanWalterAuthor Commented:
If I substitute the open type font name with a ttf font name (e.g. AlfredDrake.ttf for FedraSansAltPro%20Book.otf, the new font (alfreddrake) displays correctly.

So I have a problem with the OTF file type.

Thoughts?

Dan
0
abelCommented:
If CSS encounters two equal rules, it will take the last one. However, I wouldn't count on that cross-browser (though most of the time this basic rule is applied, the reason is simple, it prevents back-tracking).

However, this does not apply to @-rules and surely not to @font-face, unless combining them causes conflicts, in which case the last one is used again.

Understanding @font-face in its totality requires quite a long study, esp. all the browser quirks (no browser supports it completely anyway). Here's a link that explains how you can make it working for IE, but the same page does not work with FF: http://www.spoono.com/html/tutorials/tutorial.php?id=19

-- Abel --
0
abelCommented:
BTW: not sure I said this before, but TTF fonts are not supported. It must be either Open Type (iirc, that's supported by FF) or Embeddable Open Type (iirc that's supported by IE).
0
DanWalterAuthor Commented:
Abel:
I tried the .js library, again with mixed results.  It works on one machine, not on another, both running FF 3.5, with the website on the development server.

I appreciate your comment "TTF fonts are not supported", but the weird thing is those work 100%.  It's the oft file type that works only sometimes.

Dan
0
abelCommented:
To help you further I need to have the same information as you have. Can you package a test page with your fonts, the eot, the oft, the ttf and your html + css? Keep it small and simple. If you zip or rar it, rename it before uploading to EE. If you don't want your files public, see my email in my profile page.
0
DanWalterAuthor Commented:
abel:
I appreciate the offer, but this is taking too much of my time.  The idea of an embedded font was attractive to us as a way to ensure full international support for our site - the font we purchased has support for all the languages we need.  We will use the font for printed material that is created on demand on our server.  As to the UI components of the site, for now I am content to just let the browser and OS handle it via language packs and keyboard layouts.

It does seem like the @font-face rule standard implementation is still in flux - font developers need to wrap their heads around licensing issues and the different browser implementations need to develop some sort of common tools for font conversion.

Thanks for the help.
Dan

0
abelCommented:
That is exactly what it is: @font-face is still in its infancy, even though it has been standardized since the late nineties. It has had a very slow start, partially because of the complexity and the problems with copyright protection, partially because of the large overhead that is involved in downloading a font. A full Unicode font (yes, I know, there's none in existence) can be easily larger than 30MB, even in this day of age quite a lot for a simple HTML page.

Other problems include the support for open font formats: most font types are protected and are not available for free download, as such they cannot be used with @font-face so easily.

But the real problem is simply the support. No browser in existence today supports the @font-face standard completely. Workarounds as with the Typeface.js library make it easier, but it is still far from perfect.

If you want to give it out of hand and would like a plug and play solution so you don't need to spend too much time on it, you can contact me off-site for an offer. I can also advice you in-depth on Unicode/UTF-XX (or Shift-Jis, Big5, KOI-8 and many others) and other encoding-related matters.

-- Abel --
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
DanWalterAuthor Commented:
Abel:
At the beginning of this process I was concerned about our licensing of the font.  I have contacted the font author, and he has told me that very soon he will have a secure, copyright protected, method of downloading the font available to us for a reasonable licensing fee.

So I will pursue this through the font owner.  Thanks again for all your kind help.  I will award you the points not especially for a solution, but as a thank you for a pleasant learning experience.

Dan
0
DanWalterAuthor Commented:
There is no solution - the process itself was very instructive.  In this case, it's all about the journey, not the destination.
0
abelCommented:
@Dan: if there is no solution, but you find the help valuable, then don't let that influence your grade. http://www.experts-exchange.com/help.jsp?hi=405

If you agree to this standpoint, have a look here: http://www.experts-exchange.com/help.jsp?hi=404
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
CSS

From novice to tech pro — start learning today.