Joomla Templates Club 406,261 posts

[oancea Friend oanceaJoin date: December 2008Posts: 10Downloads:3Uploads:5 Thanks: 7 Thanked: 1 times in 1 posts]

#196359

Hello,
I would like to change the defaults fonts of my teline IV portal – http://s4-vm2.rdbs.net/ with one serif font provided by Google – http://typecast.com/preview/google/PT%20Serif
The new font should apply in menus, article view, module featured, module ja news pro, module ja bulletin, most read modules etc
Could you please tell me how I can make these changes?
Thank you a lot for your advice.

Dana

[TomC Moderator TomCJoin date: October 2014Posts: 14077Downloads:58Uploads:137 Thanks: 948 Thanked: 3155 times in 2495 posts]

#529079

This is one of those cases where an online web development tool such as comes in very handy – to identify the appropriate CSS rules you need to work with to effectuate the modifications you are wanting to achieve.

1 user says Thank You to TomC for this useful post

1. oancea

[oancea Friend oanceaJoin date: December 2008Posts: 10Downloads:3Uploads:5 Thanks: 7 Thanked: 1 times in 1 posts]

#529161

Dear Tom,
I could manage some changes from Backend – Google Font API Settings (see capture) . What I need now is to change the font size and the line height. How can I manage this? (I see a custom css for every Google Font API Settings).
For example, for article page view, I need for titles PT Serif Normal 400 36px; line height: 48px; and for the text PT Serif Normal 400 17px; line height: 26px.
Please advise 🙂
Similar, for intros on Home I need another font size as in the article view.
I can’t see any font changes at the titles on Home Page – Featured Module and JA News Pro. Can you also please advise on this?
Thanks a lot for your help 🙂

---

Attachments:

1. 

1 user says Thank You to oancea for this useful post

1. Ninja Lead

[Ninja Lead Moderator Ninja LeadJoin date: November 2014Posts: 16064Downloads:310Uploads:2864 Thanks: 341 Thanked: 3854 times in 3563 posts]

#529168

You can use custom CSS field in Google Font API Settings option of JA Teline IV template.

font-family: 'PT Serif' !important;
font-style : normal !important;
font-weight : 400 !important;

See the screenshot for reference:

---

Attachments:

1. 

1 user says Thank You to Ninja Lead for this useful post

1. oancea

[oancea Friend oanceaJoin date: December 2008Posts: 10Downloads:3Uploads:5 Thanks: 7 Thanked: 1 times in 1 posts]

#529190

Dear Ninja,
Thanks a lot for your answer. This helps me further. I need now to differentiate the font-size in article text, intro text showed on Home by Featured Module and JA News Pro Module and Category pages and also in the links-modules (Most Read, JA Bulletin ). The global settings at API Google Fonts will change the font-size in the whole site. How can I set specific font-sizes for these elements?
Thanks in advance 🙂

[timtecsa Friend timtecsaJoin date: October 2009Posts: 1382Downloads:86Uploads:327 Thanks: 197 Thanked: 132 times in 34 posts]

#529205

As Tom C suggests you may find it useful to use the features in Firefox or Chrome which let you view the CSS related to anything on your web page. See:

This is a screen grab of a page on your site (English) where I have used Chrome browser. I right clicked on the article headline and selected “Inspect Element” from the menu that pops up. I then scrolled down in the right hand column to the part where I see

[FONT=verdana]At the top of this entry is the URL of the CSS file that will need editing should you wish to
change, for example, the line height of this page element.

Deselect the checkbox and you’ll see that the line height in the article headline changes. Reselect and
it resets. Double click in the 1.2 and edit to 1.0 and you’ll get a tighter line height.

None of the above edits actually change any of your site’s CSS. You have to go to the relevant CSS file
and edit it (and SAVE:-) to permanently set it. Note the :20 at end of the CSS URL – this is the line number.

See: https://developers.google.com/chrome-developer-tools/docs/elements [FONT=verdana]for more info. The same features
are available in Firefox if you prefer that browser.

Good luck. Nice site.[/FONT][/FONT]

---

Attachments:

1. 
2. 

2 users say Thank You to timtecsa for this useful post

1. oancea
2. TomC

[Author]

Posts