How do I convert my font to data

qassimhaider

Hi, Would you please assist me with: How do I convert my font to [ data:application/octet-stream... ] for web/CSS instead of placing URL of the font itself. thanks. 

RichardW

I'm not sure I understand your question.  If you mean, 'How do I convert to WOFF format', a good answer is the program sfnt2woff available on GitHub.  If you mean, how do I hide the fact that it's a font, you might be able to do something with the HTTP headers sent from the web server, but that makes no sense in the context of CSS.

Viktor Rubenko

terminal:

base64 font.ttf > fontbase64.txt

then embed it into your css with:

@font-face {

  font-family: "Font";

  src: url("data:font/<FONT FORMAT>;base64,<ENCODED TEXT FROM FILE>") format("<FONT FORMAT>");

}

qassimhaider

Thanks for your help, yes perfectly it's through the terminal, 

base64 font.ttf > fontbase64.txt

as here also: https://www.htmlgoodies.com/beyond/webmaster/serving-up-base64-encoded-custom-fonts.html

Johannes Neumeier

There really is no good reason to do this...

$ base64 YourFont.ttf > Notsecure.txt
$ base64 -d Notsecure.txt > YourFontAgain.ttf

What it does do is prevent the user's browser from caching that file (bad) and use ~25-50% more space more (also bad) and it forces the server to transmit that data, instead of more efficiently serving a file (also bad). Anybody who know how to grab a woff file from their browser console also knows how to save a base64 blob to a file.

base64 is like zip, it does _nothing_ to protect your file. Unlike zip, it only makes your font larger in size.

Aaron Muir Hamilton

What it does do is prevent the user's browser from caching that file (bad)

That's not always an issue, nor is it necessarily the case. If the CSS file you are embedding the font into is itself cached, which it usually will be, then the font data are cached with it. This is only really an additional issue if the CSS is inline in the page, and the font is used on several pages.

use ~25-50% more space more (also bad)

It's 33%, or 36% if you have line breaks; and once the CSS file is gzipped the difference ends up being more like 1-2%.

There are good reasons to inline a font: when it is subsetted, and/or you are only using it one one page, and/or you are only using it in one shared stylesheet. I agree that it's not "protecting" the font in any way, not sure why you would want to try to do that anyway, it is a fool's errand.

A particularly good case for embedding fonts in data URIs is for icon fonts, if you wrote custom hinting code for your icons (making SVG not an option).