Menu
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".
[UPDATE]:
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:
/apps/myproject/pages/base/base.jsp
Location of css.txt:
/etc/designs/myproject/clientlib/desktop/css.txt
825
It looks like a bug. The CSS is passed through a method that specifically looks for url('{}') in the CSS files concatenated together to create the combined CSS file - CssFileBuilder#resolveUrl(String[], String[], String). This method doesn't appear to take into account the data scheme, instead it only skips modifying the URL if it has a length of 0, starts with a slash (/) or matches the pattern "^[A-Za-z][A-Za-z0-9+\-.]://." (effectively external links). My assumption would be that it does this in order to modify relative url('{}') values, but they didn't take into account the data scheme.
I'd recommend opening a Daycare ticket with Adobe to update this method to support the data-uri-scheme.
65
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.
25
Two strategies for working around CQ5's (usually helpful) link rewrites:
(1) Place the @font-face code in the external .css file(s) that is assembled for you by CQ5. Instead of using the <cq:includeClientLib> tag to include it in your HTML, you might find that you have to explicitly code the <link> tag, e.g.:
<link rel="stylesheet" href="<%= currentDesign.getPath() %>/clientlibs/themes/default.css" type="text/css" media="screen" />
(2) Inject the @font-face code with a document.write() call:
<script type="text/javascript">
document.write("@font-face { font-family: 'CustomFont'; src: url(data:application/x-font-woff;
...}");
</script>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
