3

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/

Drakes
  • 23,254
  • 3
  • 51
  • 94
flinx777
  • 597
  • 2
  • 11
  • 25

3 Answers3

2

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

zzzzBov
  • 174,988
  • 54
  • 320
  • 367
0

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/

Chris Ferdinandi
  • 1,892
  • 4
  • 26
  • 34
0

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

Alain Gauthier
  • 820
  • 1
  • 12
  • 14