0

I have a css file with a font-face section in it. Are there any known issues around using minification tools from google/yahoo when applying them on a css file with a font-face section. If so, what are some of the workarounds that could be explored. Not minifying is an option though I would prefer to minify the non font-face section, even if it means creating two separate files, one with non font-face css and one with font-face. However, I am wondering if anyone has a suggested way of dealing with this without resorting to two separate HTTP requests for the CSS files. Thanks in advance for your input/suggestions.

ali haider
  • 131
  • 4
  • 2
    Voting to close. You're asking for solutions to a problem you don't even have yet. Try it first and see if there even is a problem. – Su' Feb 14 '13 at 19:44
  • wondeitring - have you tested this on different browsers and browser versions? I have seen multiple reports online which mentioned issues and hence wanted to inquire about best practices. thank you in any case. – ali haider Feb 14 '13 at 20:45

1 Answers1

1

I took the font face declaration from this page http://paulirish.com/2009/bulletproof-font-face-implementation-syntax/

@font-face {
  font-family: 'Graublau Web';
  src: url('GraublauWeb.eot?') format('eot'), url('GraublauWeb.woff') format('woff'), url('GraublauWeb.ttf') format('truetype');
}

And ran it through yui-compressor

@font-face{font-family:'Graublau Web';src:url('GraublauWeb.eot?') format('eot'),url('GraublauWeb.woff') format('woff'),url('GraublauWeb.ttf') format('truetype')}

It appears that the minimized css will work just fine in this case.

Edit: It doesn't appear that you should be worried about base64 encoded data in font face src urls either. I ran the css from this example page http://robert.accettura.com/wp-content/uploads/2009/07/embedded-font-face.html through yui-compressor, pasted it back into the file and opened it in my browser without any problems.

Stephen Ostermiller
  • 98,758
  • 18
  • 137
  • 361