Forum How do I...?

Font rendering different in prince than html

I'm trying to render this in prince:

<div class="titlepage-quote" style="
    font-family: 'Interstate Light';
    font-style: italic;
    font-size: 18.2pt;
    color: #5488a1;
"Do not stop thinking of life as an adventure. You have no security unless you can live bravely, excitingly, imaginatively; unless you can choose a challenge instead of competence."

It looks fine in HTML:

But not in Prince:

It looks like prince can't find the font and it's falling back to a serif (Interstate is installed on my system, mac). If I remove the 'italic' style then it works fine too (but it's not italic like I want).

You can find the a copy of font files download via (though I've got a license for the Interstate font use via Adobe subscription, I can't quite figure out how to get that working directly with Prince).

Any tips on how to fix or debug this?

Edited by schneems

Can you check the Font Book program to see exactly which font faces are installed?

I have tried using the fonts locally and they work fine, so it must be related to accessing them as system fonts on MacOS specifically.
Here's how those interstate fonts show up in my fontbook:

I'm not sure how you would tell/trigger prince to use that specific font with italic. Firefox + HTML seems to find it just fine.

I did see that there's a font-weight that I can manually change, using interstate + italic + font-weight: 200 seems to give me roughly what I want, but I'm trying to match a comp in illustrator and it's not quite right. I'm still a little confused why it shows up in a browser but not prince (since styling in a browser is my main prince styling workflow).

I'll continue to play with it.