Uploaded image for project: 'eZ Publish / Platform'
  1. eZ Publish / Platform
  2. EZP-19376

CSS packer and font-face conflict

    XMLWordPrintable

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.

      Attachments

        Activity

          People

            Unassigned Unassigned
            d24ca137-3cee-42c9-86d9-b8fd9173fb23@accounts.ibexa.co 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