How can I force CQ5.5 to ignore CSS data-uri-schemes?

Tags: css,base64,cq5,data-uri

Problem :

I am trying to include a custom font into css using the data-uri-scheme. CQ5 (I'm using version 5.5) is adding the path from the clientlib directory to the location where the css file with the data-uri-scheme font data is located.

So instead of just ignoring the css property:

@font-face {
  font-family: 'CustomFont';
  src: url(data:application/x-font-woff;...

CQ5 does the following:

@font-face {
  font-family: 'CustomFont';
  src: url(desktop/css/data:application/x-font-woff;...

Is this a bug in CQ5.5 or can I add/do something to prevent the addition of "desktop/css"?

The result is, I'm getting 404 HTTP status because the font is "not found".


The css file is included in the base.jsp in the html <head> section.

<link rel="stylesheet" 
    href="/etc/designs/myproject/clientlib/desktop.css" type="text/css"/ >

Location of base.jsp:


Location of css.txt:


Solution :

It's a bug, will be fixed with 5.6. Including the individual css file directly (as mentioned) avoids the clientlib rewriting, otherwise I don't know of a workaround inside a clientlib.

The reason is that clientlibs are rewriting the relative paths because the base changes from the individual css file to the concatenated clientlib css. "data:" uris were simply not considered properly here.

    CSS Howto..

    How to conditionally render CSS and JavaScript inside head element of an HTML

    How to embed video on my first website

    How to have a background image properly fade in with CSS

    How to set parent div height to self adapt to the inner div height?

    How to select siblings between 2 tags of same class using CSS

    How to set out css properly?

    How can I vertically align the text on these CSS buttons?

    How to add CSS dynamically to a controller in SAPUI5

    How do I split a WordPress theme into 2 columns?

    How do I get the name of div a user must click to appear in a text div?

    How to set size of a checkbox in table vaadin

    How can I use javascript, html and css to make an image a button, which can do the following?

    How to override CSS style during hover in a table row?

    How to rotate text using CSS

    How do you indent subsequent lines of text using

    How can i give transparency effect in CSS?

    CSS selectors: how to make element hovering change wrapper's style

    Border display issue, not sure how to resolve

    How to change size of text input but not textarea in jquery mobile

    What's the idea behind image sprites, how to approach it?

    How to formatting a simple
      in columns and bolding the first item on its own line

    how to setup capybara-webkit to test ajax calls and get screenshots(html with css and javascript loaded)

    How to apply this effect to the last line of a text?

    How can I float divs so that they expand past their container?

    How to achieve cellpadding with divs or likeiwse?

    JavaFX editable tableview: How to change size and css of the TextField inside of TableCell?

    How do you measure the height of a HTML element scaled with CSS3 transform?

    How to create a 100% fixed footer with a fixed width center transparent gap?

    How to place an image between horizontal list items

    How to fix div position while scrolling? [closed]