How do I convert my font to data

qassimhaider
qassimhaider Posts: 4
in Font Technology
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. 

Tagged:

Comments

  • RichardW
    RichardW Posts: 100
    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
    Viktor Rubenko Posts: 119
    edited March 2021
    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
    qassimhaider Posts: 4
    Thanks for your help, yes perfectly it's through the terminal, 

    base64 font.ttf > fontbase64.txt

  • Aaron Muir Hamilton
    Aaron Muir Hamilton Posts: 21
    edited April 2021
    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).

Categories