Joomla Templates Club 406,261 posts

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

#1038491

How can i change the Headline and Copytext typography to a sans-serif font

Hi there!
The "Frank Ruhl Libre" is a nice one, but i need sans-serif font.
Something like a "Futura".

Where i have to change the "google-font" thing?

I need your help, please.

Best!
Klem

• its running over my Xampp!

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

#1038712

Hi,

Could you send me screenshot highlighting the text you want to change the font?

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

#1038731

Hi Sugaros!
Its not necessary with the screenshot.
Take the frontpage of your demo site,
how i asked, headline and cotpytext.

Thanks.

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

#1038733

Hi Sugaros!
Its not necessary with the screenshot.
Take the frontpage of your demo site,
how i asked, headline and cotpytext.

Thanks.

Btw: your server is super slow. i have also problmes to see the joomlart.com at my ipad. What happened?

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

#1038930

Hi,

The problem here is that I don’t know which ‘headline’ & ‘copytext’ here on our demo site.

If I got your point correctly, the headline is the text in the slideshow, right? You can override the css style for it by opening the file: [root]/templates/ja_oslo (your default template)/css/custom.css (create this file if it doesn’t exist)

and add this css rule:

.article-slideshow .article-title {
  font-family: your_font_family_here;
}

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

#1038992

Thanks!

Saguros, i cant mention that you dont know that – h1, h2, h3 … – usually used for HEADLINES/SUBLINES. Mostly bold and bigger sized as the body text.
Body stands usually for COPY TEXT.
Thats are not to difficult to understand, i think. Its global!

I need the infos for that problem, my problem. It will be usefull to explain the way for embedding google fonts.

I`m a little irritated that i need 3 days to get a proper answer. Your first answer was totally unneccessary. It seems that like this is standard. Why?
The error thing with a propper url, i worte that it runs at Xampp. What should i do next time? Give you the local host url?

Do i need payed professional support for these little things?
The times are changing. 🙁

Your server is super slow.I have also problmes to see the joomlart.com website at my ipad in good condition. What happened?
I`m not alone with this awareness.

Be patient with me, i`m not a programmer!

Best!
Klem

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

#1039497

Hi Klem,

JA Oslo template is built with T3 framework which implements the Bootstrap 3 framework. This template declares the font-family, font size, etc via this file: [root]/templates/ja_oslo/less/variables.less

You can see the declaration for ‘Typography’ at approx line 74:

// Typography
// -------------------------
@font-family-sans-serif:  "Heebo", Helvetica, Arial, sans-serif;
@font-family-serif:       "Frank Ruhl Libre", "Times New Roman", Times, serif;
@font-family-monospace:   Monaco, Menlo, Consolas, "Courier New", monospace;
@font-family-base:        @font-family-serif;

@font-size-base:          16px;
@font-size-large:         ceil(@font-size-base * 1.1); // ~18px
@font-size-small:         ceil(@font-size-base * 0.75); // ~12px

@font-size-h1:            floor(@font-size-base * 3.75); // ~60px
@font-size-h2:            floor(@font-size-base * 2.25); // ~36px
@font-size-h3:            ceil(@font-size-base * 1.5); // ~24px
@font-size-h4:            ceil(@font-size-base * 1.1); // ~18px
@font-size-h5:            @font-size-base;
@font-size-h6:            ceil(@font-size-base * 0.75); // ~12px

@line-height-base:        1.5; // 24/16
@line-height-computed:    floor(@font-size-base * @line-height-base); // ~24px

@headings-font-family:    @font-family-base;
@headings-font-weight:    500;
@headings-line-height:    1.1;
@headings-color:          inherit;

As you can see that the ‘font-family-base’ variable will be used in entire website, you can change to the variable you wish. The same with base font size.

I hope this makes sense.

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

#1040555

Hi Saguaros!

I`ll try it.
Thanks.

[Author]

Posts