Details
-
Bug
-
Resolution: Fixed
-
High
-
2012.1, 4.4.0, 4.7.0, 5.0, 5.1, 5.2, 5.4.7, 5.3.9
-
None
-
Browser (and version): All
Description
When using the "Fontspring syntax" for embedding CSS fonts, the ezJScore packer duplicates one of the paths where the font is located. For example:
@font-face { font-family: 'myfont'; src: url('myfont.eot'); src: url('myfont.eot?#iefix') format('embedded-opentype'), url('myfont.woff') format('woff'), url('myfont.ttf') format('truetype'), url('myfont.svg#myfont') format('svg'); font-weight: normal; font-style: normal; }
Turns into:
@font-face { font-family: 'myfont'; src: url('/design/mydesign/stylesheets/myfont.eot'); src: url('/design/mydesign/stylesheets//design/mydesign/stylesheets/myfont.eot?#iefix') format('embedded-opentype'), url('/design/mydesign/stylesheets/myfont.woff') format('woff'), url('/design/mydesign/stylesheets/myfont.ttf') format('truetype'), url('/design/mydesign/stylesheets/myfont.svg#myfont') format('svg'); font-weight: normal; font-style: normal; }
Therefore, IE6-8 don't show the font since it returns error 404.
I have only tested in 4.4.0 and Community 2012.01
Steps to reproduce
1. Paste the first code in a stylesheet
2. Enable packer (DevelopmentMode=disabled)
3. View generated stylesheet
Steps to reproduce (detailed):
1. Prepare a fully updated eZ Publish 4.7 installation;
2. Make sure the eZJSCore packer is enabled, by editing ezjscore.ini add adding a "Packer=enabled" setting to it;
3. Create a new "test.css" file under /extension/ezdemo/design/ezdemo/stylesheets/test.css, with the following CSS code:
@font-face { font-family: 'HelvNeue'; font-weight: normal; font-style: normal; src: url('fonts/HelvNeue55.woff2') format('woff2'), url('fonts/HelvNeue55.woff') format('woff'); }
4. Edit /extension/ezdemo/design/ezdemo/templates/page_head_style.tpl and add a new "test.css" entry:
... {ezcss_load( array( 'bootstrap.css', 'responsive.css', 'debug.css', 'websitetoolbar.css', 'test.css', ezini( 'StylesheetSettings', 'CSSFileList', 'design.ini' ), ezini( 'StylesheetSettings', 'FrontendCSSFileList', 'design.ini' ) ) )} ...
5. Clear cache;
6. Go to a URL that uses template(s) that call the CSS file, such as the website's homepage, open the browser's JS console and check the contents of the main CSS file (it will have a "<hash>_all.css" name format). There will be a "@font-face" section like this:
@font-face { font-family: 'HelvNeue'; font-weight: normal; font-style: normal; src: url('/extension/ezdemo/design/ezdemo/stylesheets//extension/ezdemo/design/ezdemo/stylesheets/fonts/HelvNeue55.woff2') format('woff2'), url('/extension/ezdemo/design/ezdemo/stylesheets/fonts/HelvNeue55.woff') format('woff') }
As you can see, the code "url('fonts/HelvNeue55.woff2')" has been converted to "url('/extension/ezdemo/design/ezdemo/stylesheets//extension/ezdemo/design/ezdemo/stylesheets/fonts/HelvNeue55.woff2')" and doesn't work.