How to decode base64-encoded font information?

This is an interesting question, despite being a magnet for pirate hunters. I will focus on the technical question and try to give some insight.

Looking at the OP's file, there are six fonts in it. Each one is basically a CSS rule; here's the first one in the example file:

@font-face {
    font-family: "p22-underground-1";
    font-style: normal;
    font-weight: 400;
    src: url("data:font/opentype;base64,d09GRk9...yn4b8C3JEZAA==");
}

This tells you everything that you need to know to identify the font. You can see its name (p22-underground-1) its style (normal), weight (400) and type (opentype).

As for decoding the font from base64 into a binary file, you need to take the base64 bit (shown above as d09GRk9...yn4b8C3JEZAA==, note the bulk in the cenre has been removed to save space here) and decode it with a base64 decoder such as Motobit or by writing a program.

If you're on Linux, you can use base64 -d <file> to achieve the same thing.

If the decoding fails, the base64 string may be also be percent-escaped. This isn't the case with the OP's example but I know of at least one site where this is the case.

You can check for this by looking for percent % symbols in the base64 string. If percent characters are the only non-valid base64 characters then you can try to unescape the string prior to decoding.

There is a web site where you can do this or, again, for those on Linux, a command-line method is shown below (there are many ways to do this; this one uses Perl):

perl -MURI::Escape -lne 'print uri_unescape($_)' < file.b64_escaped > file.b64

I wrote a small tool in Ruby that takes a url and dumps any embedded fonts into files using the above techniques so I can say that they do work.


1) locate the complete font declaration, for example, data:font/opentype;base64,AaBbCcDdEeFf0123456789==

2) copy the encoded data portion; exclude the leading type declaration and comma.

Drop this data:font/opentype;base64,

You want this: AaBbCcDdEeFf0123456789==

3) decode the data and save as a binary encoded file. Do not decode the data and manually paste the result into a text editor. Use http://www.motobit.com/util/base64-decoder-encoder.asp Select the "decode the data from a Base64 string" and "export to a binary file" options.

4) View the file using a plain text editor. The first 3 or 4 letters of the file are probably "woff", "otf", or "ttf". This is your actual file type.


Paste data:application/font-woff;base64,d09GRgABAA..... in the browser (ideally Chrome) address bar. It will download the file, rename the file with proper file extension (e.g. data:application/font-woff is a .woff, data:application/font-woff2 is a .woff2, etc...). This will work with any font file.

Tags:

Css

Fonts

Base64