Tell me more ×
Webmasters Stack Exchange is a question and answer site for pro webmasters. It's 100% free, no registration required.
up vote 0 down vote favorite

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
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 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 at 20:45

closed as not constructive by Su', Lèse majesté, danlefree♦ Feb 16 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 specific 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, see the FAQ for guidance.

1 Answer

up vote 1 down vote

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 at 20:51
I also tested a base64 example and updated the answer. – Stephen Ostermiller♦ Feb 14 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 at 21:28

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