How to Decode Base64-Encoded Font Information

How to decode base64-encoded font information?

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.

How to decode base64-encoded font information?

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.

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

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

Converting and rendering web fonts to base64 - keep original look

In the Font Squirrel Expert options, make sure to set the 'TrueType Hinting' option to 'Keep Existing'. Either of the other options will cause the TrueType instructions (hints) to be modified, which will in turn affect the rendering of the font.

Alternatively, if you're happy with the rendering of the font directly from GWF, you can just take that file and do the base64 encoding yourself. In OS X or Linux, use the built-in base64 command in Terminal/shell:

$ base64 myfont.ttf > fontbase64.txt

For Windows, you'll need to download a program to encode in base64 (there are several free/Open Source tools available). Copy the contents of that file, then use in your CSS as:

@font-face {
    font-family: 'myfont';
    src: url(data:font/truetype;charset=utf-8;base64,<<copied base64 string>>) format('truetype');
    font-weight: normal;
    font-style: normal;
}

(Note that you may need to make some adjustments to the various @font-face info to match your particular font data; this is just an example template)

Base64 encoded OpenType font-face using data URI

Data URIs are always of this format:

data:[<mediatype>][;base64],<data>

The very first part of every data URI is the media-type, which in the case of an Open Type font is:

font/opentype

So, you may use it like this:

@font-face{
    font-family: test;
    src: url(data:font/opentype; base64, [base64 string here]);
}

Replacing

[base64 string here]

with the exact copy-pasted version of your base-64 encoded string.

Notes

Please note that:

• you should use font/opentype for the data, not otf.
• you should copy-paste the exact base-64 encode string, without any changes like added spaces, etc (I believe there are some spaces in it)

Online Encoding Tool

You may use this tool, to convert your font file to the encoded string.

How to encode and decode Base64 and Base64Url in Flutter / Dart

The dart:convert library contains an encoder and decoder for Base64 and Base64Url. However, they encode and decode Lists of integers, so for strings you also need to encode and decode in UTF-8. Rather than doing these two encodings separately, you can combine them with fuse.

You need to have the following import:

import 'dart:convert';

Base64

String credentials = "username:password";
Codec<String, String> stringToBase64 = utf8.fuse(base64);
String encoded = stringToBase64.encode(credentials);      // dXNlcm5hbWU6cGFzc3dvcmQ=
String decoded = stringToBase64.decode(encoded);          // username:password

Note that this is equivalent to:

String encoded = base64.encode(utf8.encode(credentials)); // dXNlcm5hbWU6cGFzc3dvcmQ=
String decoded = utf8.decode(base64.decode(encoded));     // username:password

Base64Url

String credentials = "username:password";
Codec<String, String> stringToBase64Url = utf8.fuse(base64Url);
String encoded = stringToBase64Url.encode(credentials);      // dXNlcm5hbWU6cGFzc3dvcmQ=
String decoded = stringToBase64Url.decode(encoded);          // username:password

Again, this is equivalent to:

String encoded = base64Url.encode(utf8.encode(credentials)); // dXNlcm5hbWU6cGFzc3dvcmQ=
String decoded = utf8.decode(base64Url.decode(encoded));     // username:password

See also

• RCF 4648
• String based data encoding: Base64 vs Base64url

Does anyone know how to decode and encode a string in Base64 using Base64?

First:

• Choose an encoding. UTF-8 is generally a good choice; stick to an encoding which will definitely be valid on both sides. It would be rare to use something other than UTF-8 or UTF-16.

Transmitting end:

• Encode the string to bytes (e.g. text.getBytes(encodingName))
• Encode the bytes to base64 using the Base64 class
• Transmit the base64

Receiving end:

• Receive the base64
• Decode the base64 to bytes using the Base64 class
• Decode the bytes to a string (e.g. new String(bytes, encodingName))

So something like:

// Sending side
byte[] data = text.getBytes("UTF-8");
String base64 = Base64.encodeToString(data, Base64.DEFAULT);

// Receiving side
byte[] data = Base64.decode(base64, Base64.DEFAULT);
String text = new String(data, "UTF-8");

Or with StandardCharsets:

// Sending side
byte[] data = text.getBytes(StandardCharsets.UTF_8);
String base64 = Base64.encodeToString(data, Base64.DEFAULT);

// Receiving side
byte[] data = Base64.decode(base64, Base64.DEFAULT);
String text = new String(data, StandardCharsets.UTF_8);

---

Related Topics