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:
This works for prince, but not for the browser:
The only way I've managed to get it working is to provide an absolute URL :
Obviously, for portability I'd like to avoid this!
Any tips?
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?