How do I convert my font to data

Comments

• Options

  RichardW Posts: 100

  March 2021

  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.

  2
• Options

  Viktor Rubenko Posts: 119

  March 2021 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>");

  }

  3
• Options

  qassimhaider Posts: 4

  March 2021

  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

  0
• Options

  Johannes Neumeier Posts: 363

  March 2021 edited March 2021

  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.
  

  
  
  
  
  

  5
• Options

  Aaron Muir Hamilton Posts: 20

  April 2021 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).

  2