Forum How do I...?

font-face with a root path not working

freshwaterit
I'm trying to use a custom font and have that used by the browser and Prince with the same CSS file.

However, the root directory for the font-face source is web-based for the browser and filesystem based for Prince.

For example, this works for the browser with the ttf file residing in the css folder, but not with Prince since on the webserver there is no /css folder:
@font-face {
font-family: MyCustomFont;
font-weight: normal;
font-style: normal;    
src: url(/css/MyCustomFont.ttf) format('truetype');
}


This works for prince, but not for the browser:
@font-face {
font-family: MyCustomFont;
font-weight: normal;
font-style: normal;    
src: url(/Users/username/Sites/mywebsite.com/css/MyCustomFont.ttf) format('truetype');
}


The only way I've managed to get it working is to provide an absolute URL :
src: url(http://www.mywebsite.com/css/MyCustomFont.ttf) format('truetype');


Obviously, for portability I'd like to avoid this!

Any tips?


mikeday
You can use the --fileroot option, to provide a directory that should be used as the base for absolute paths. For example, --fileroot=/Users/username/Sites/mywebsite.com. This may be just what you need. Another alternative is specifying a base URL for the document, but that only applies to relative paths.