27

I encountered a website which used encoded font information. I tried to convert this encoded font to a binary file through the Base64 Endoder/Decoder Web service, but I couldn't find out what is the format of the resulting file.

Here is the encoded CSS content (the content is too big to be copied/paste here).

Thanks!

[EDIT]

Please don't speculate on what I want to do.

I am asking questions about how the base64 code has been forged and what I am missing to be able to reverse the process, which means I do not understand everything in it. These technique is often used in webpages with custom fonts, and seems to have some improvements compared to the raw font file directly given reference in the CSS file. I am fully aware that the involved fonts are commercial ones and can't be used freely.

That debate is off-topic, stop trolling.

2
  • The answer of Andrew Moore should be enough for you: you wanted the font, the name, where it comes from. What do you need more? Nov 18, 2011 at 8:37
  • So ... no luck with this one then.
    – aaaidan
    Apr 9, 2013 at 4:42

4 Answers 4

43

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.

20

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.

1
  • 4
    How is this not the accepted answer? It does every step the accepted answer does, except automatically.
    – Dan
    Sep 22, 2020 at 12:57
3

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.

2

The CSS clearly states the mimetype to be font/opentype... The font is in OpenType (.otf) format.

However, even if you do decode the font, please check the license. You might not be allowed to use that font in your own projects.

The fonts referenced in the CSS files (Proxma Nova [Mark Simonson Studios] and P22 Underground [P22 Type Foundry]) are not free. You need to purchase a license to use them legally.

8
  • What license should be checked? A license in general?
    – avetarman
    Aug 3, 2011 at 2:01
  • @avetarman: OpenType fonts have a license field in their meta data. Also, the fonts (Proxma Nova [Mark Simonson Studios] and P22 Underground [P22 Type Foundry]) both needs to be bought and licensed before use. Aug 3, 2011 at 2:04
  • 3
    And yet, this doesn't answer the core question at all. Heh, it appears one of you downvoted me (without reason). Aug 3, 2011 at 2:10
  • @Delan: Yes it does... The core question is: "I couldn't find out what is the format of the resulting file." The answer is OpenType. Aug 3, 2011 at 2:11
  • 1
    Thanks for your help, the same as the one given above. Again, I couldn't obtain a valid .otf file and I am probably missing something to completely understand the processes being used to convert a font in base64 here... And for the legal aspect again, there is no piracy in wanting to understand a set of characters written in the source of a webpage I downloaded in my browser to read. Aug 4, 2011 at 14:48

Your Answer

Reminder: Answers generated by Artificial Intelligence tools are not allowed on Stack Overflow. Learn more

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.