Level 4

Solved

How to apply font for only one component?

Forum|Forum|9 years ago
March 14, 2016
5 replies
3000 views

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

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.

Best answer by kautuk_sahni

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

smacdonald2008

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.

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

mikezoozAuthor

Level 4

Its applying for entire template.

smacdonald2008

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

edubey

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

kautuk_sahni

Accepted solution

Community Manager

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

Sign up

Login with SSO

Login to the community

Login with SSO

Scanning file for viruses.

This file cannot be downloaded