'How to minify CSS with font-face

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.

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

htmlcssfont-face


Solution 1:[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

Solution 2:[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/

Solution 3:[3]

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

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 zzzzBov
Solution 2 Chris Ferdinandi
Solution 3 Alain Gauthier

Related Questions