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

Question

I have an @font-face rule, and its look like this:

@font-face{
    font-family:'F';
src:url("") format("embedded-opentype"),
url(data:application/x-font-woff;charset=utf-8;base64,d09GRgABAA ... ETC... ETC

Can i convert this to a font file?

Thanks!

Solution 1

Copy the base64 encoded part and convert it. There are many ways to do that.

Linux

base64 -d base64_encoded_font.txt > font.woff

Mac OS X

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

WIndows

Go to http://www.motobit.com/util/base64-decoder-encoder.asp and paste the text. Choose "decode the data from a Base64 string (base64 decoding)" and "export to a binary file".

Solution 2

@mcrumley's answer is correct, but for those of you who can't figure it out and/or are afraid of the command-line, I have an alternate method.

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.

If woff files aren't what you need, there are plenty of online tools to convert woff to the format of your choice. Or if you need an offline tool, check out this question I asked and the answers I received:

Modify Python Script to Batch Convert all "WOFF" Files in Directory

Solution 3

1. Copy:

   data:application/x-font-woff;charset=utf-8;base64,d09GRgABAA ...ETC
   

2. Paste in your browsers address bar, press enter.

   - A save as window appear -
   

3. Choose a folder to save to (ex: mywebsite/fonts), filename: myfont.woff

   - you now have myfont.woff in a folder -
   

4. Include in css:

   @font-face {
      font-family: 'myfont';
      src: url('fonts/myfont.woff');
      font-weight: normal;
      font-style: normal;
   }
   

5. Add to a class:

   .headline {
   font-family: 'myfont', Helvetica, Arial, sans-serif;
   }
   

Done. 🍺

(Note that you have to use the same file-format as declared in the data:URI syntax. In your case ...application/x-font-woff... hence myfont.woff)

Comments

[Leopold Kristjansson]

Thanks. I tried the windows method - great tool (that maybe needs the help of a graphic designer :) After naming my file myfont.woff I went to font-squirrel and converted to all the fonts I need (.eot, .ttf etc etc).

[keithjgrant]

I'm in OS X and the openssl method here did not work for me, but the Linux solution using base64 did (using option -D rather than -d)