SquishIt icon indicating copy to clipboard operation
SquishIt copied to clipboard

When including Fontello CSS in Bundles the Fontello fonts return 404

Open brgrz opened this issue 11 years ago • 5 comments

Apparently SquishIt incorrectly handles the URLs below which already include cache busting param (the random number):

@font-face {
  font-family: 'fontello';
  src: url('../font/fontello.eot?23384653');
  src: url('../font/fontello.eot?23384653#iefix') format('embedded-opentype'),
       url('../font/fontello.woff?23384653') format('woff'),
       url('../font/fontello.ttf?23384653') format('truetype'),
       url('../font/fontello.svg?23384653#fontello') format('svg');
  font-weight: normal;
  font-style: normal;
}

Request for the Fontello font returns 404 when using SquishIt (compilation debug=false in web.config).

brgrz avatar Oct 15 '13 20:10 brgrz

What version of SquishIt are you using?

Can you post your CSS block before and after SquishIt rewrites the paths?

AlexCuse avatar Oct 15 '13 20:10 AlexCuse

This is the correct block:

@font-face {
  font-family: 'fontello';
  src: url('../font/fontello.eot?23384653');
  src: url('../font/fontello.eot?23384653#iefix') format('embedded-opentype'),
       url('../font/fontello.woff?23384653') format('woff'),
       url('../font/fontello.ttf?23384653') format('truetype'),
       url('../font/fontello.svg?23384653#fontello') format('svg');
  font-weight: normal;
  font-style: normal;
}

And this is SquishIt minimized:

@font-face {
    font-family: 'fontello';
    src: url('fonts/font/fontello.eot?23384653');
    src: url('fonts/font/fontello.eot?23384653#iefix') format('embedded-opentype'),url('fonts/font/fontello.woff?23384653') format('woff'),url('fonts/font/fontello.ttf?23384653') format('truetype'),url('fonts/font/fontello.svg?23384653#fontello') format('svg');
    font-weight: normal;
    font-style: normal;
}

My fonts are at root/fonts and minimized css is stored to root/css, so it should still keep the leading ".." dots.

brgrz avatar Oct 18 '13 09:10 brgrz

It also rewrites the codes from this

.icon-facebook-squared:before { content: '\e804'; } /* '' */
.icon-calendar:before { content: '\e801'; } /* '' */

to this

.icon-facebook-squared:before {
    content: '';
}

.icon-calendar:before {
    content: '';
}

brgrz avatar Oct 18 '13 09:10 brgrz

What minifier are you using? I suspect that is what is squashing your special characters, I just wrote this test and it passes:

        [Test]
        public void WontEncodeSpecialCharacters()
        {
            var css = @".icon-facebook-squared:before { content: '\e804'; } /* '' */
.icon-calendar:before { content: '\e801'; } /* '' */";

            var sourceFile = TestUtilities.PreparePath(@"C:\somepath\myFile.css");
            var destinationFile = TestUtilities.PreparePath(@"C:\somepath\somesubpath\myRewrittenFile.css");

            var result = CSSPathRewriter.RewriteCssPaths(destinationFile, sourceFile, css, null);

            Assert.AreEqual(css, result);
        }

On the subject of fonts, what is the original location of your source file prior to combination?

AlexCuse avatar Oct 18 '13 13:10 AlexCuse

Were you able to get this working by switching minifiers?

AlexCuse avatar Dec 24 '14 13:12 AlexCuse