Route not found in font files in Symfony
I am struggling a bit with font loading in Symfony. Here's what's going wrong:
Situation
I am using Symfony and I am trying to add Metro UI CSS files to a bundle. The files are located in the Resources / public / lib / metro-ui folder.
Resources/public/lib/metro-ui
- css
- fonts
- js
- min
I have a layout in a file like this:
{% stylesheets
'bundles/manager/lib/metro-ui/css/metro-bootstrap.css'
%}
The Metro UI boot file contains the following fonts:
@font-face {
font-family: 'metroSysIcons';
src: url('../fonts/metroSysIcons.woff') format('woff'),
url('../fonts/metroSysIcons.ttf') format('truetype'),
url('../fonts/metroSysIcons.svg#metroSysIcons') format('svg');
font-weight: normal;
font-style: normal;
}
I used Assetic command assets: install to install assets to my web folder. In fact, the assets were copied, even the fonts.
Problem
When I go to the webpage, my css is loaded, but my fonts are not. When I look in the developer console (F12 in Chrome), I see that loading fonts results in a 404. Requested URL:
http://sub.domain.lc/fonts/metroSysIcons.woff
When I enter this address into my browser, I get this:
No route found for "GET /fonts/metroSysIcons.woff"
404 Not Found - NotFoundHttpException
1 linked Exception:
ResourceNotFoundException »
For every other asset, this works:
// This loads the correct bootstrap file:
http://sub.domain.lc/css/afd9510_metro-bootstrap_1.css
So every asset can be found that way, but not my font files (woff and tff both).
Questions
My problem raises several questions:
- Why is Symfony trying to find my font via app.php using routes?
- Are all assets found via routes?
- If yes: why are routes for font files not allowed?
- How can I download font files?
[edit]
I tried to use the css rewrite filter like this:
{% stylesheets filter='cssrewrite'
'bundles/manager/lib/metro-ui/css/metro-bootstrap.css'
%}
I am still getting 404, but now the browser is trying to get my font from this location:
http://sub.domain.lc/bundles/manager/lib/metro-ui/fonts/metroSysIcons.woff
I get the same "No route found for the GET /" ..... "message.
source to share
So, after everything I've tried, there was something in my .htaccess that was blocking the font files.
RewriteCond %{HTTP_HOST} ^sub\.domain\.(?:lc|nl)$ [NC]
RewriteRule $(.*) app_dev.php$1 [NC,L,QSA]
I added the following condition:
RewriteCond %{HTTP_HOST} ^sub\.domain\.(?:lc|nl)$ [NC]
RewriteCond %{REQUEST_URI} !\.(png|woff|tff)$
RewriteRule $(.*) app_dev.php$1 [NC,L,QSA]
Now I can download the fonts.
source to share
You must use a filter cssurlrewrite
with Assetic:
Since Assetic generates new URLs for your assets, any relative paths within your CSS files will break. To fix this, be sure to use the cssrewrite filter with the stylesheets tag. This parses your CSS files and fixes the paths internally to reflect the new location.
Link to docs: http://symfony.com/doc/current/cookbook/assetic/asset_management.html
source to share
Have you tried this (it's kind of an alias name):
{% stylesheets output = 'fonts/metroSysIcons.woff'
'@bundles/manager/lib/fonts/metroSysIcons.woff' %}
{% endstylesheets %}
I'm not sure about the line '@bundles/manager/lib/metro-ui/css/metro-bootstrap.css'
, because it might be different if your path is not exactly the same.
It should be: @bundle_name/path/to/your/file/file.css
And don't forget the CSS:
{% stylesheets '@MyBundle/Resources/public/css/my.css' %}
<link rel="stylesheet" href="{{ asset_url }}" />
{% endstylesheets %}
source to share