Symfony Asset bundling

Question

In Symfony 2 Im using asset bundling like so.

{% stylesheets
            'bootstrap/css/bootstrap.css'
            'bootstrap/flat/css/flat-ui.css'
            filter='cssrewrite'
            filter='?yui_css'
%}

It works perfectly, however my @font-face resources do not load. They work fine on the dev environment, but as soon as the css is bundled into a single file on the production environment, the default font loads instead?

The cssrewrite is working correctly as I checked the relative path was correctly updated to point to the right area, I even tried using the absolute URL which did not work.

I tried turning compiling of, which did not help. The only thing that worked was removing it from the bundling, and loading it directly.

Is there some kind of bug with symfony asset bundling and @font-face :S :S :S

Below is the css for @font-face in the prod environment after being bundled.

@font-face{font-family:"Flat-UI-Icons-16";src:url("../bootstrap/flat/fonts/Flat-UI-Icons-16.eot");src:url("../bootstrap/flat/fonts/Flat-UI-Icons-16.eot?#iefix") 

Answer 1

There are some good information about URL in CSS files in this Stackoverflow page .

One of the response states that relative URLs within a CSS file are relative to the directory where the file is located.

If your font is loaded from

bootstrap/css/bootstrap.css

And the URLs within the CSS looks like the following relative URL:

../bootstrap/flat/fonts/Flat-UI-Icons-16.eot

That means the browser will try to get the font as following

bootstrap/bootstrap/flat/fonts/Flat-UI-Icons-16.eot

You probably want to try the following URL style

../../bootstrap/flat/fonts/Flat-UI-Icons-16.eot

Or

../flat/fonts/Flat-UI-Icons-16.eot

I would highly recommend the documentation about fixing css path with cssrewrite filter .

Note that if you use the cssrewrite filter you cannot use the @YourAwesomeBundle syntax.

I hope this will fix your issue