Embedding custom fonts

I’m trying to use our corporate font in a prototype. I’ve followed Nathan Krischner’s tutorial and I have this:

font-family: 'nationaltrustdisplaytt-regular.ttf'; /* replace with font name */
src: url(data:application/x-font-woff;charset=utf-8;nationaltrustdisplaytt-regularAxure.ttf,/*put your base64 encoded file here in place of this comment*/)

That was after running:

openssl base64 -in nationaltrustdisplaytt-regular.ttf -out nationaltrustdisplaytt-regularAxure.ttf

in the command line on my Mac in the directory the original font is in. But still no joy. Just for reference, this is the page I’m using to base my prototype on:


This is my prototype:


It works on my laptop - I’m guessing this is because I have the font. But it doesn’t work on my phone.

I can’t call the font from the live site as we have some security stuff that should prevent this (although I haven’t tried as I’m not sure how)

Any ideas would be gratefully received.


Sorted it. Someone from the front end dev team just sent me a huge great string to put in with the base64 encoded stuff. I’m not gonna pretend I know what he’s done but it works.

Glad you got it sorted. For anyone who find this, the -out file in the command you listed above is the file where that big blob of text the dev have you would have been. You could have made it a txt instead of a ttf. It will actually be an invalid ttf file. That huge blob of text is the actual font file.

Either way, I made this recently so you wouldn’t have to use the command line and could do it all in browser:


1 Like

Nice one. I did find a site as well. Font Squirrel or something. But I didn’t fancy uploading our corporate font to some site like that. I’d have used yours thought :slight_smile:

Anyway, I get it now. Thanks for the explanation. I didn’t even think to cat the file and look at the contents.


1 Like