How to decode base64-encoded font information?


Tags: css,fonts,base64

Problem :

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.



Solution :

1) locate the complete font declaration, for example, font/opentype;base64,==abcdefghijklmnopqrstuvwxyz==

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

Drop this font/opentype;base64,

You want this: ==abcdefghijklmnopqrstuvwxyz==

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.


    CSS Howto..

    How do I use Stylish to change the font in Google Tasks?

    How can I get these two form fields to fill the space between them [duplicate]

    How can I get as much of the text into a DIV row as possible?

    How to use relative referencing in CSS files

    How to make a custom select option menu style without image in CSS?

    How do I make hidden description text push the content upwards when it shows

    How to set a background-color to element which has the same id with anchor of url?

    How can I get jQuery to toggle a class with fadeToggle?

    How to actually center (vertical and horizontal) text inside a nested div

    How to override CSS in joomla template

    How can i add a css rule for this code?

    How do I know when is the right moment to stop using a specific css vendor-prefix?

    how to use !important in jQuery animate() function

    How do I make this responsive layout with CSS?

    How can I differentiate unordered lists in CSS?

    How to Javascript to load a css file only for one specific page?

    How to use several css classes to one element?

    Change how CSS border edges meet? [duplicate]

    How to overlap elements inside of a ng-repeat list - position: absolute?

    How to call CSS from JavaScript

    How to make the slider move right and left alternatively

    How to make a floated element take the entire width of its parent

    How can I set a height of document [duplicate]

    How I can add highlight effect on outside the area of selection with CSS?

    How do I put a scrollable div next to a non-scrollable div using CSS?

    How to vertically align a form and image

    how to make vertical progress path using css

    How do I add colored corners to a background image?

    How to debug a website template which is very slow (client side)?

    Can't get table to show up using HTML and CSS