Converting base64 font back to ttf or otf

Question

I've followed the instructions below but I've not been able to successfully convert to .woff

Can I convert embedded base64 encode font to a font file?

my font file starts with

@font-face {
font-family: "ff_0f65bfd4c8d788fc278265526a59";
src: url(data:font/woff;base64,d09GRk9UVE8AAGQDAAs............

and ends with

...........PPvfkLBXJFlQ==);
}

I can only assume the issue is the portion of the code I'm trying to convert. Any help would be much appreciated.

When I attempt the command below, it just creates an empty file.

openssl base64 -d -in base64_encoded_font.txt -out font.woff

score 35 · Answer 1 · edited Dec 02 '15 at 21:15

35

Yes you can by using two online tools.

First copy the base64 data, so everything after 'base64,' and leave out the ); ending. Then go this website and paste the code:

http://www.opinionatedgeek.com/dotnet/tools/Base64Decode/

It will download a .bin file. Next go to:

https://onlinefontconverter.com

Upload your .bin file on the right and select convert to otf or tiff from the links on the left. Click the new download link. Download, unzip and your font will be in there!

edited Dec 02 '15 at 21:15

Endless

34,080
13
108
131

answered Jan 17 '15 at 00:49

Kupe

665
7
13

Many thanks for the answer. Unfortunately the second part of this doesn't seem to work at this point. Does anyone know of an alternative? – JGC Mar 15 '16 at 10:06
1

The opinionatedgeek site had some errors but refreshing the site fixed it, the second part worked fine for me. – Niel May 19 '16 at 03:13
3

I get a network error when trying to download the decoded font – Adrian Feb 21 '18 at 13:26
1

As @Adrian mentionned I got network error too, instead I tried another tool that works perfectly alone, you just past the data (everything after `base64,`) and you exclude the string `) format('truetype');` Here's the tool I used, https://base64.guru/converter/decode , it automatically detects that it is a font file and gives you the download option. – Yassir Khaldi Nov 06 '20 at 11:57
unfortunately onlinefontconverter.com has been down for a few days already. Does anyone know some alternative? – Geza Gog Mar 31 '21 at 07:30

score 30 · Answer 2 · answered Nov 07 '16 at 13:46

30

You can simply open the font from Network panel in developers tools and save it.

Here is step-by-step for Google Chrome:

Open Chrome dev. tools (CMD+SHIFT+I, CTRL+SHIFT+I)
Open "Network" tab, refresh website
Filter only: Fonts
Right click on font file + "Open in new tab"
Save file + name it based on font type.

That's all.

answered Nov 07 '16 at 13:46

usrbowe

539
7
11

This is the easiest one! Thanks! – Navaneeth Jan 24 '19 at 13:04

score 5 · Answer 3 · edited May 14 '16 at 06:38

I just Googled your question, and found http://base64converter.com/ which can convert/decode (and encode) any base64 file back to its original format. I'd used it to encode and decode base64 images in this past, but this was my first attempt with a font. As a test I plugged in the embedded base64 font info I found in a random webpage's css file. You don't want the entire entry, leave off the css info or the conversion will fail.

(For example) delete this info preceding the base64:

@font-face{font-family:"Example";src:url(data:application/x-font-woff;base64,

Delete this from the end:
```
);font-weight:400;font-style:normal}
```
You'll be left with the base64 encoded data, paste that in the "Input" field, select "Decode" for the output and press the button. It will create a file called download.bin : click it to download it. Then change the file extension from bin to woff (your font file-type might be different, but it will say in the css). I was able to open the .woff file and the conversion worked perfectly; not only were all the outlines saved, but so were the glyph names, the opentype features, kerning, and everything.

Of course, like any method used to rip webfonts, the number of glyphs outputted will likely be limited to those used on the page in question.

score 5 · Answer 4 · edited Feb 23 '19 at 00:46

Go to Inspector in browser, and select Network.
Reload the page an filter files from woff, ttf, etc..
On file name click right and select copy response.
Paste content into a file and delete from top all content until to "base64," inclusive.
Paste the rest of the data in https://www.opinionatedgeek.com/dotnet/tools/Base64Decode/ and decode.
Download the bin file and upload to https://onlinefontconverter.com

Now you have your RESTRICTED font content! Success and thanks to Kupe and Endless.

score 1 · Answer 5 · answered May 14 '16 at 07:04

Convert base64 fonts to other formats using the following steps:

Copy the base64 data.

In CSS it's the part marked "THIS_CODE":

@font-face {
  font-family:"font-name-here";
  src:url(data:font/opentype;base64,THIS_CODE);
}

Decode the base64 data using a converter. Here are two online converters: opinionatedgeek.com and motobit.com

These will both output a .bin file.
Go to onlinefontconverter.com check the types of fonts that you want (maybe OTF or TTF) and then click "Select Font(s)" and upload the .bin file. Click "Done" and the site will find the desired font file formats, then offer you a link to download a zip file containing your desired font files.

Converting base64 font back to ttf or otf

5 Answers5

Linked