Expand my Community achievements bar.

Issues with loading fonts in AEM

Avatar

Level 4

Hello, I have an issue with loading the custom fonts in AEM 6.5.6.0. I have created the resources/fonts folder and kept the custom fonts and also set the allowProxy to access the Clientl-Library which is under /apps/.

 

Below is the entry that I have referenced in my css file.

@Font-face {

font-display: fallback;

font-family: 'Sun';

font-style: normal;

font-weight: 700;

src: url('/etc.clientlibs/project/clientlibs/clientlib-site/resources/fonts/test.woff2') format('woff2')

}

 

above entries are transformed into a client library entry like regardless of accessing the pages from different folder (content/project/a.html or content/project/test/b.html or content/project/test/version/c.html )

@Font-face {

    font-display: fallback;

    font-family: Sun;

    font-style: normal;

    font-weight: 700;

    src: url(../../../../etc.clientlibs/project/clientlibs/clientlib-site/resources/fonts/test.woff2) format("woff2"), }

 

 This relative path with ../../../../  added in the prefix, because of this issue, the fonts are not loading. is there a way to address this issue?

12 Replies

Avatar

Community Advisor

hi @aemninja 

 

Are you facing issues in the author & publish instance too or it is only limited to dispatcher? 

 

Thanks,

Pallavi Shukla

 

 

Avatar

Level 4

I am facing this issue in author instance. Basically I am checking if the fonts are loading or not. Because of the incorrect path reference, the fonts are not loading,

Avatar

Employee Advisor

Do not use the full path including clientlib path, rather, you should create a resources/fonts folder in your clientlib, and add the relative path of the font in your CSS.

Avatar

Level 4

I have already tried with relative path as well but I still see the same issue. 

Avatar

Community Advisor

I have seen this issue before, someone else as reported this.



Arun Patidar

Avatar

Community Advisor

I think the clientlibrary entry should also display the path with "/etc.clientlibs/project/..." Can we look into what is transforming this?

For eg if yo uhave a ui.frontend module probably some clientlib config is transforming that in the actual clientlib css?

Avatar

Community Advisor

Hi @aemninja 

 

Did you check the fonts loading in the develop tool network tab? 

If fonts are loading in the network tab and not from the generated minified css. Could be the case that the fonts are not loading the newly generated minified files which normally happens when you try to build from ui.frontend and the minifed files are not getting refered proerly at the page level. 

 

Avatar

Level 4

The fonts are not loading in dev tools -> network tab as well. if I access the font file url directly, I am able to download but it is not loading on page load.

Avatar

Community Advisor

@aemninja Hope you are not having the any dispatcher on top of your AEM. 

 

And also if the fonts are not loading in the server means some issue with your font location. Please try hitting the path in the dev tool console and check if it is accessable

Avatar

Community Advisor

Hi,

I believe something is wrong with your css code

Although the issue is valid.

 

I have found a way to fix this

 


@font-face {
font-family: 'CustomFont';
font-style: normal;
font-weight: normal;
src: local('CustomFont'), url('../clientlib-site/resources/fonts/Austria.ttf') format('truetype');
}
body {
font-family: 'CustomFont', serif;
font-size: 48px;
}

 

Arun_Patidar_0-1656956164734.png

 

 



Arun Patidar

Avatar

Community Advisor

Hi @aemninja ,

 

The issue is with references, you are trying to refer along with etc.clientlibs. please give a relative path from your file  location to the clientlib-site folder by removing  ../../../../etc.clientlibs/project/clientlibs. in your src.

 

Also, Please refer to @arunpatidar 's solution below.

 

~Aditya.Ch

Thanks,

Aditya Chabuku