adobe / adobe/aem-core-wcm-components

Incorrect font paths for AMP inline CSS

Open
#1,371 3 comments 0 reactions 0 assignees View on GitHub
question
Dominant language
Java
Stars
796
Forks
776
Avg merge
3d 22h
Merged PRs (30d)
8

Description

## Bug Report

**Current Behavior**
Hello,
On AMP pages we need to inline css to match AMP requirements. We do that using
```

${clientlibs.cssInline @ context="unsafe"}

```
With this approach we have an issue with fonts. In our css we have entries with fonts like:

```
@font-face {
font-display: fallback;
font-family: 'Sun';
font-style: normal;
font-weight: 700;
src: url('/etc.clientlibs/project/clientlibs/generated/clientlib-site/resources/fonts/project/Sun-Bold.woff2') format('woff2')
}
```
that are transformed into a client library entry like:
```
@font-face {
font-display: fallback;
font-family: Sun;
font-style: normal;
font-weight: 700;
src: url(../../../../etc.clientlibs/project/clientlibs/generated/clientlib-site/resources/fonts/project/Sun-Bold.woff2) format("woff2"),
}
```

This relative path with `../../../../` works fine when client lib is included in regular way as a link
``

but once it is added inline the link is relative to the page path, for example

- page: http://localhost:4502/content/project/home/page.html -> fonts are included correctly
- page: http://localhost:4502/content/project/home/page/child.html -> fonts are requested with wrong path:
**/content**/etc.clientlibs/project/clientlibs/generated/clientlib-site/resources/fonts/project/Sun-Bold.woff2
- page: http://localhost:4502/content/project/home/page/child/child2.html -> fonts are requested with wrong path:
**/content/project**/etc.clientlibs/project/clientlibs/generated/clientlib-site/resources/fonts/project/Sun-Bold.woff2

I am not sure whether it's a bug or maybe there is another way to include static resources for clientlibs to make it work with inline css. Could you please advise? Thanks for your help :)

**Expected behavior/code**
Inline css works correctly for all static resources on any page.

**Environment**
- AEM version and patch level: 6.5.6.0
- Core Components version 2.11.1
- JRE version 11.0.9

Contributor guide

Open the contributing guide

Research direction

Start by reproducing the AMP inline CSS snippet using clientlibs.cssInline on pages at increasing nesting depths, then inspect how the generated client library rewrites font URLs. Done means inline CSS resolves the font resource correctly on every page path, while regular linked client libraries remain unaffected.

Written by the indexing model from the issue text.

Assessment

Tech stack
css, html
Domain
frontend
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Needs clarification
Newbie friendliness
30/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.