Webmasters Stack Exchange is a question and answer site for pro webmasters. Join them; it only takes a minute:

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

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.

share|improve this question

closed as not constructive by Su', Lèse majesté, danlefree Feb 16 '13 at 5:35

As it currently stands, this question is not a good fit for our Q&A format. We expect answers to be supported by facts, references, or expertise, but this question will likely solicit debate, arguments, polling, or extended discussion. If you feel that this question can be improved and possibly reopened, visit the help center for guidance.If this question can be reworded to fit the rules in the help center, please edit the question.

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

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.

share|improve this answer
thank you for sharing - Mine has some base64 information in it as well. I will revert with test results on latest browser versions. thanks – ali haider Feb 14 '13 at 20:51
I also tested a base64 example and updated the answer. – Stephen Ostermiller Feb 14 '13 at 21:24
thank you for sharing - +1. I will accept as soon as I test on all browsers I can test on. – ali haider Feb 14 '13 at 21:28

Not the answer you're looking for? Browse other questions tagged or ask your own question.