How to minify CSS with font-face

Question

I've got a stylesheet with font-face. When I minify the css using online services, the font-face stops working. The approach I've taken is the to extract the font-face code, minify the rest of the css and then stick the font-face at the top of the minified stylesheet. Curious if anyone has a better approach to this.

Here's my code: http://snipt.org/zfAj5

I used this service to minify my code: http://www.minifycss.com/css-compressor/

Answer 1

If the tool you're using to minify CSS can't minify CSS, throw it out and get a better tool.

YUI Compressor is a good minification tool for both CSS and JavaScript

Answer 2

I've found using the Google Chrome Page Speed plugin to minify my CSS helps avoid issues like this. It doesn't minify CSS as extremely as some other programs do, but I never run into browser rendering issues either.

I currently have a few stylesheets with @font-face in them minified using this approach:

1. Download and install Google Chrome, if you don’t already have it.
2. Install the Page Speed add-on.
3. In Google Chrome, run the Developer Tools and click on the “Page Speed” tab. Then click “Analyze.” You’ll be given an overall score, and a list of things you can do to improve your score.
4. One of the items on the list will be “Minify CSS.” Click it. Under “Suggestions for this page” is a link to “see optimized content.” Follow that to get a minified version of your CSS provided by Google.

Source: http://gomakethings.com/how-to-trick-out-the-performance-of-your-wordpress-site/

Answer 3

minifybeautify.com should do the job ... it is instant and simple!