How to apply font for only one component?

[mikezooz]

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 

[smacdonald2008]

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. 

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

[mikezooz]

Its applying for entire template.

[smacdonald2008]

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

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

[edubey]

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...

[kautuk_sahni · Accepted solution]

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.

                

Name	Type	Value
dependencies	String[]	cq.jquery
categories	String[]	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