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

Answer 1

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

Here is step-by-step for Google Chrome:

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

That's all.

Answer 2

Convert base64 fonts to other formats using the following steps:

1. 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);
   }
   

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

   These will both output a .bin file.

3. 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.

Answer 3

• 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.

Answer 4

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!

Answer 5

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.

1. (For example) delete this info preceding the base64:

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

2. Delete this from the end:

   );font-weight:400;font-style:normal}
   

3. 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.