We help IT Professionals succeed at work.

Check out our new AWS podcast with Certified Expert, Phil Phillips! Listen to "How to Execute a Seamless AWS Migration" on EE or on your favorite podcast platform. Listen Now

x

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

DanWalter
DanWalter asked
on
Medium Priority
2,420 Views
Last Modified: 2012-05-07
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

Comment
Watch Question

Commented:
the same font needs to be installed on the remote machine in order to see it properly

Author

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
Top Expert 2009

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

Author

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

Dan
Top Expert 2009

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

Author

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

Author

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
Top Expert 2009

Commented:
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 --
Top Expert 2009

Commented:
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).

Author

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
Top Expert 2009

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

Author

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

Top Expert 2009
Commented:
Unlock this solution with a free trial preview.
(No credit card required)
Get Preview

Author

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

Author

Commented:
There is no solution - the process itself was very instructive.  In this case, it's all about the journey, not the destination.
Top Expert 2009

Commented:
@Dan: if there is no solution, but you find the help valuable, then don't let that influence your grade. https://www.experts-exchange.com/help.jsp?hi=405

If you agree to this standpoint, have a look here: https://www.experts-exchange.com/help.jsp?hi=404
Unlock the solution to this question.
Thanks for using Experts Exchange.

Please provide your email to receive a free trial preview!

*This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

OR

Please enter a first name

Please enter a last name

8+ characters (letters, numbers, and a symbol)

By clicking, you agree to the Terms of Use and Privacy Policy.