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

            • Assignee:
              Unassigned
              Reporter:
              gfinkelstein 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