Hello, I have an issue with loading the custom fonts in AEM 18.104.22.168. 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.
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 )
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?
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,
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.
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?
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.
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.
@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
I believe something is wrong with your css code
Although the issue is valid.
I have found a way to fix this
src: local('CustomFont'), url('../clientlib-site/resources/fonts/Austria.ttf') format('truetype');
font-family: 'CustomFont', serif;
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.