Expand my Community achievements bar.

Dive into Adobe Summit 2024! Explore curated list of AEM sessions & labs, register, connect with experts, ask questions, engage, and share insights. Don't miss the excitement.
SOLVED

How to apply font for only one component?

Avatar

Level 4

Hi All,

I have a template which has many components. In that only one component i have to apply  custom font.

could you please help me out? how to fix the issue?

 

Thanks,

Michael 

1 Accepted Solution

Avatar

Correct answer by
Administrator

Hi

As mentioned by Praveen, components are modules, they can have their own JS and CSS.

So to implement CSS/JS only to the component,

Add CSS and JQuery files to a CQ:ClientLibraryFolder node

You add a CSS file and a JQuery framework file to a cq:ClientLibraryFolder node to define the style of the client JSP. The JQuery framework file that is added is named jquery-1.6.3.min.js.

To add CSS files and the JQuery framework to your component, add acq:ClientLibraryFolder node to your component. After you create the node, set properties that allow the JSP script to find the CSS files and the JQuery library files.

To add the JQuery framework, add a new node named clientlibs to your component (as discussed later). Add these two properties to this node.

                
NameTypeValue
dependenciesString[]cq.jquery 
categoriesString[]jquerysamples 
The dependencies property informs CQ to include the CSS and JQuery libraries in the page. The categories property informs CQ which clientlibs must be included.

After you create the Clientlibs folder, add a CSS file, and the JQuery library file, and two map text files.

 

And add the "<cq:includeClientLib categories="jquerysamples" />" to jsp to reflect the client libs changes.

Reference Link:- https://helpx.adobe.com/experience-manager/using/custom-sling-servlets.html

I hope this will help you.

 

Thanks and regards

Kautuk Sahni



Kautuk Sahni

View solution in original post

5 Replies

Avatar

Level 10

Make sure you add your custom font to AEM:

https://docs.adobe.com/docs/en/aem/6-1/develop/platform/adding-fonts.html

and then use it in the component;s JSP. 

{
    font-family: "Times New Roman", Georgia, Serif;
}

Avatar

Level 4

Its applying for entire template.

Avatar

Level 10

T Here is not much information on this. One thing that may help is this page: 

http://blogs.adobe.com/aaa/tag/fonts

Avatar

Level 10

Hi michaelvino86,

Component are like individual modules you have.

Now if you want to apply for a particular component, make sure you are loading CSS (which will give you font) only in component and target using Id.

Example

CSS

div#myfont {
    font-family: "Times New Roman", Georgia, Serif;
}

Component HTML

<div id="myfont" >
This is my custom component which will used different font
</div>

 

It should work for you...

Avatar

Correct answer by
Administrator

Hi

As mentioned by Praveen, components are modules, they can have their own JS and CSS.

So to implement CSS/JS only to the component,

Add CSS and JQuery files to a CQ:ClientLibraryFolder node

You add a CSS file and a JQuery framework file to a cq:ClientLibraryFolder node to define the style of the client JSP. The JQuery framework file that is added is named jquery-1.6.3.min.js.

To add CSS files and the JQuery framework to your component, add acq:ClientLibraryFolder node to your component. After you create the node, set properties that allow the JSP script to find the CSS files and the JQuery library files.

To add the JQuery framework, add a new node named clientlibs to your component (as discussed later). Add these two properties to this node.

                
NameTypeValue
dependenciesString[]cq.jquery 
categoriesString[]jquerysamples 
The dependencies property informs CQ to include the CSS and JQuery libraries in the page. The categories property informs CQ which clientlibs must be included.

After you create the Clientlibs folder, add a CSS file, and the JQuery library file, and two map text files.

 

And add the "<cq:includeClientLib categories="jquerysamples" />" to jsp to reflect the client libs changes.

Reference Link:- https://helpx.adobe.com/experience-manager/using/custom-sling-servlets.html

I hope this will help you.

 

Thanks and regards

Kautuk Sahni



Kautuk Sahni