Details

      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.

        Activity

        Hide
        Matthieu Sévère added a comment -

        I'm facing the same bug. Anyone found a fix ?

        Show
        Matthieu Sévère added a comment - I'm facing the same bug. Anyone found a fix ?
        Hide
        Open Wide added a comment -

        Hello,

        You can use this, it's not a real fix but it works :

        @font-face {
        font-family: 'myfont';
        src: url('myfont.eot');
        src: url('../stylesheets/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;
        }

        Regards

        Show
        Open Wide added a comment - Hello, You can use this, it's not a real fix but it works : @font-face { font-family: 'myfont'; src: url('myfont.eot'); src: url('../stylesheets/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; } Regards
        Show
        Simon Terrien added a comment - - edited https://github.com/ezsystems/ezpublish-legacy/pull/1163
        Hide
        Simon Terrien added a comment -

        Can you change the title into :

        CSS packer and font-face conflict

        instead of :

        CSS packer & font-face conflict

        Show
        Simon Terrien added a comment - Can you change the title into : CSS packer and font-face conflict instead of : CSS packer & font-face conflict
        Show
        Joao Inacio (Inactive) added a comment - Alternate PR https://github.com/ezsystems/ezpublish-legacy/pull/1252
        Show
        Joao Inacio (Inactive) added a comment - Merged in master: https://github.com/ezsystems/ezpublish-legacy/commit/866c9b585be73c352fd0fb59465cea7baba4b181
        Hide
        Paulo Nunes (Inactive) added a comment - - edited

        QA Approved
        Tested on master and in 5.4

        Show
        Paulo Nunes (Inactive) added a comment - - edited QA Approved Tested on master and in 5.4
        Hide
        Paulo Nunes (Inactive) added a comment -

        Reopened because needs a backport to 4.7

        Note to 3rd line: I applied 5.4 patch on a 4.7 installation and this patch seems to solve the issue on 4.7 as well. But nevertheless, a backport is needed.

        Show
        Paulo Nunes (Inactive) added a comment - Reopened because needs a backport to 4.7 Note to 3rd line: I applied 5.4 patch on a 4.7 installation and this patch seems to solve the issue on 4.7 as well. But nevertheless, a backport is needed.
        Hide
        Paulo Nunes (Inactive) added a comment -

        QA Approved
        Tested on eZ Publish 4.7, 5.0, 5.1, 5.2, 5.3 and 5.4

        Show
        Paulo Nunes (Inactive) added a comment - QA Approved Tested on eZ Publish 4.7, 5.0, 5.1, 5.2, 5.3 and 5.4

          People

          • Assignee:
            Unassigned
            Reporter:
            Gabriel Finkelstein
          • Votes:
            1 Vote for this issue
            Watchers:
            9 Start watching this issue

            Dates

            • Created:
              Updated:
              Resolved:

              Time Tracking

              Estimated:
              Original Estimate - Not Specified
              Not Specified
              Remaining:
              Remaining Estimate - 0 minutes
              0m
              Logged:
              Time Spent - 1 hour
              1h