Issues with loading fonts in AEM

[aemninja]

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?

[Pallavi_Shukla_]

hi @aemninja 

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

Thanks,

Pallavi Shukla

[aemninja]

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,

[Mohit_KBansal]

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.

[aemninja]

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

[arunpatidar]

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

[Shubham_borole]

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?

[Jagadeesh_Prakash]

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. 

[aemninja]

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.

[Manu_Mathew_]

https://experienceleaguecommunities.adobe.com/t5/adobe-experience-manager/fonts-not-loading-in-netwo...

May be check this link.

[Jagadeesh_Prakash]

@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

[arunpatidar]

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;
}

[Aditya_Chabuku]

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