Joomla Templates Club 406,261 posts

[dataweby Friend datawebyJoin date: November 2014Posts: 9Downloads:0Uploads:0 Thanks: 9]

#205244

How can one customize (change style or font family) the fonts for titles and other text elements?

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

#565547

Fairly easily, actually … though there are several different CSS rules controlling various fonts used throughout the template, so it would be helpful if you could identify the particular font items you are looking to modify (and how), as well as provide the url of the site you’re working on.

1 user says Thank You to TomC for this useful post

1. dataweby

[dataweby Friend datawebyJoin date: November 2014Posts: 9Downloads:0Uploads:0 Thanks: 9]

#565571

First of all, thanks for the reply and the reassurance!

Here is a link for the development site (it’s a temporary link, I’ll edit the post with exact information based on the quickstart template so that other users will benefit from it when I figure it out):

This is the About Us page, it’s the simplest one in the template:
http://danceart.chameleonbi.com/about-us

Elements to change the font-family and font-size:
– Article Title
– Paragraph Text

The style for the paragraphs seems to be straight forward from the .body tag but the title style is spread across several classes.

I would go ahead and add to the custom.css overrides for the specific elements, but I’m not sure that this is the convention or the smartest way. What’s would you say is the best practice?

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

#565993

Can you do me a favor and temporarily set “Optimize CSS” to “Off” within your Template Manager–General settings?

[kmgdesign Friend kmgdesignJoin date: October 2013Posts: 114Downloads:152Uploads:9 Thanks: 13 Thanked: 4 times in 3 posts]

#569565

hi!
is there an manual to embbed googlefonts?

first i want to change H2 thing, this sort of ‘Bodoni bold’ to sans serif.
how and where i can do this?

thanks!

[kmgdesign Friend kmgdesignJoin date: October 2013Posts: 114Downloads:152Uploads:9 Thanks: 13 Thanked: 4 times in 3 posts]

#734654

hi!
is there an manual to embbed googlefonts?

first i want to change H2 thing, this sort of ‘Bodoni bold’ to sans serif.
how and where i can do this?

thanks!

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

#569669

<em>@kmgdesign 472049 wrote:</em><blockquote>hi!
is there an manual to embbed googlefonts?[/quote]

Here You Go —> https://www.joomlart.com/documentation/joomla-faqs/embed-font

[kmgdesign Friend kmgdesignJoin date: October 2013Posts: 114Downloads:152Uploads:9 Thanks: 13 Thanked: 4 times in 3 posts]

#569683

<em>@TomC 472187 wrote:</em><blockquote>Here You Go —> https://www.joomlart.com/documentation/joomla-faqs/embed-font</blockquote>

Hi TomC!
I found this info too,
but i want to change the typo in “JA Cagox”.
And there i can`t find the way to go.
:((

[kmgdesign Friend kmgdesignJoin date: October 2013Posts: 114Downloads:152Uploads:9 Thanks: 13 Thanked: 4 times in 3 posts]

#569788

I can?t find it!
I only want to change this ugly font: PLAYFAIR DISPLAY

Please, i can not longer see this face of the font.
Help!

A setting to ‘normal’ could help also.

[kmgdesign Friend kmgdesignJoin date: October 2013Posts: 114Downloads:152Uploads:9 Thanks: 13 Thanked: 4 times in 3 posts]

#734870

I can?t find it!
I only want to change this ugly font: PLAYFAIR DISPLAY

Please, i can not longer see this face of the font.
Help!

A setting to ‘normal’ could help also.

[kmgdesign Friend kmgdesignJoin date: October 2013Posts: 114Downloads:152Uploads:9 Thanks: 13 Thanked: 4 times in 3 posts]

#569793

change font:
ja_cargox / templates / ja_cargox / acm / slideshow / css / style.css = line 234 change font-family
ja_cargox / templates / ja_cargox / acm / slideshow / css / style.css = line 491 change font-family

(it do not change typo in header!)

change background color:
line 462 background: #444444 (example)

[kmgdesign Friend kmgdesignJoin date: October 2013Posts: 114Downloads:152Uploads:9 Thanks: 13 Thanked: 4 times in 3 posts]

#734875

change font:
ja_cargox / templates / ja_cargox / acm / slideshow / css / style.css = line 234 change font-family
ja_cargox / templates / ja_cargox / acm / slideshow / css / style.css = line 491 change font-family

(it do not change typo in header!)

change background color:
line 462 background: #444444 (example)

[Saguaros Moderator SaguarosJoin date: September 2014Posts: 31405Downloads:237Uploads:471 Thanks: 845 Thanked: 5346 times in 4964 posts]

#570069

Hi there,

JA Cagox is based on new T3 framework and in above documentation page, you will need to check this section: https://www.joomlart.com/documentation/joomla-faqs/embed-font#replace-google-font

With JA Cagox, you will need to open the file: ROOT/templates/ja_cagox/etc/assets.xml, you will see the same as above docs:


<stylesheets>
<file>fonts/font-awesome/css/font-awesome.min.css</file>
<file>//fonts.googleapis.com/css?family=Playfair+Display:400,400italic,700,700italic,900,900italic</file>
<file>//fonts.googleapis.com/css?family=Montserrat:400,700</file>
<file>//fonts.googleapis.com/css?family=Roboto:300,400,700</file>
<file>js/slick/slick.css</file>
</stylesheets>


and change to your desired font

I hope this helps!

[Saguaros Moderator SaguarosJoin date: September 2014Posts: 31405Downloads:237Uploads:471 Thanks: 845 Thanked: 5346 times in 4964 posts]

#735141

Hi there,

JA Cagox is based on new T3 framework and in above documentation page, you will need to check this section: https://www.joomlart.com/documentation/joomla-faqs/embed-font#replace-google-font

With JA Cagox, you will need to open the file: ROOT/templates/ja_cagox/etc/assets.xml, you will see the same as above docs:


<stylesheets>
<file>fonts/font-awesome/css/font-awesome.min.css</file>
<file>//fonts.googleapis.com/css?family=Playfair+Display:400,400italic,700,700italic,900,900italic</file>
<file>//fonts.googleapis.com/css?family=Montserrat:400,700</file>
<file>//fonts.googleapis.com/css?family=Roboto:300,400,700</file>
<file>js/slick/slick.css</file>
</stylesheets>


and change to your desired font

I hope this helps!

[kmgdesign Friend kmgdesignJoin date: October 2013Posts: 114Downloads:152Uploads:9 Thanks: 13 Thanked: 4 times in 3 posts]

#570113

Super!
Thank you.

[Author]

Posts