Home → Questions →

Local font use in css

• Edit

RJ

03 Dec, 2013 05:11 AM

Hi,
Paying customer with a question.

How do you use a local font (opentype, in this case) for use in a PDF exported from Marked (v 2.1)?

I've tried this:

1) Copy the font file (Gotham-Black.otf) to the same directory as my custom css file
2) Create a custom CSS file like this:

@font-face { font-family: 'GothamBlack’;
src:
url('Gotham-Black.otf’) format(‘opentype’); }

h1, h2 { font-family: GothamBlack; }

However, it doesn't work - the h1 and h2 revert to a default font of some sort.

Can you advise?

Cheers and thanks in advance,
RJ

1. 1 Posted by RJ on 15 Dec, 2013 11:05 PM

   

   Hey there,
   Any joy with this? Need to publish a PDF this week.
   Cheers and thanks in advance,
   RJ

   • Edit

2. Support Staff 2 Posted by Brett on 16 Dec, 2013 02:05 PM

   

   I recommend base64 encoding the font and embedding it in the style. See
   here: http://sosweetcreative.com/2613/font-face-and-base64-data-uri

   -Brett

   • Edit

3. 3 Posted by RJ on 24 Dec, 2013 12:59 AM

   

   That doesn't work in Marked. It does work when I make a local webpage and css file and run it in Chrome though:

   @font-face { font-family: 'gothamblack';
   src: url("data:font/opentype;base64,T1RUTwAMA ... etc etc ... ");
   }

   h1, h2 {
   font-family:gothamblack;
   }

   It would be nice if you tested your recommendations before making them or gave more specific instructions. Can you please help as this is now quite urgent.

   • Edit

4. Support Staff 4 Posted by Brett on 24 Dec, 2013 01:37 AM

   

   It most certainly works in Marked. Three of the default styles use embedded base64 date URIs. See here for example.

   I recommend going to FontSquirrel's web font generator. Choose the Expert option, select only the Woff format and find the checkbox that turns on Base64 embedding under the CSS header. Let me know if that helps.

   • Edit

5. Support Staff 5 Posted by Brett on 24 Dec, 2013 01:56 AM

   

   Grab this. https://gist.github.com/ttscoff/ad8c957493ad196d7224

   It's the free version of Gotham Black converted to woff and base64'd. Tested in Marked.

   

   • Edit

6. Support Staff 6 Posted by Brett on 24 Dec, 2013 01:57 AM

   

   The version of the font I found was stubborn, but I was able to convert it with ttf2woff.com. Let me know if that works for your needs.

   • Edit