Solved

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

Posted on 2009-07-02
16
1,540 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

0
Comment
Question by:DanWalter
  • 8
  • 7
16 Comments
 
LVL 8

Expert Comment

by:ccpjc
ID: 24763589
the same font needs to be installed on the remote machine in order to see it properly
0
 

Author Comment

by:DanWalter
ID: 24763674
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
 
LVL 39

Expert Comment

by:abel
ID: 24763727
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
 

Author Comment

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

Dan
0
 
LVL 39

Expert Comment

by:abel
ID: 24764016
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
 

Author Comment

by:DanWalter
ID: 24764124
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
 

Author Comment

by:DanWalter
ID: 24764207
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
 
LVL 39

Expert Comment

by:abel
ID: 24764345
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
How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

 
LVL 39

Expert Comment

by:abel
ID: 24764375
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
 

Author Comment

by:DanWalter
ID: 24765074
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
 
LVL 39

Expert Comment

by:abel
ID: 24765236
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
 

Author Comment

by:DanWalter
ID: 24765672
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
 
LVL 39

Accepted Solution

by:
abel earned 500 total points
ID: 24766559
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
 

Author Comment

by:DanWalter
ID: 24766889
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
 

Author Closing Comment

by:DanWalter
ID: 31599197
There is no solution - the process itself was very instructive.  In this case, it's all about the journey, not the destination.
0
 
LVL 39

Expert Comment

by:abel
ID: 24767200
@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

Featured Post

Highfive Gives IT Their Time Back

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

Join & Write a Comment

Suggested Solutions

Unordered lists (HTML ul tags) are very handy to create menus of all types, shapes and sizes.  All it takes is a little knowledge of CSS and the possibilities are endless. First off, you should know the general format for menus created using the …
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
In this tutorial viewers will learn how to style transparent/translucent elements using alpha transparency in CSS Start with a normal styled element, such as a div.: Define its "background-color" property as "rgba (255, 255, 255, .5): The numbers in…
In this tutorial viewers will learn how to customize the background color and font color of highlighted text using the ::selection element in CSS Begin by defining the selected text as an element in CSS by typing "::selection": Style the ::selection…

747 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

11 Experts available now in Live!

Get 1:1 Help Now