Support Forum

Please note that this forum is only available to you in read only mode. In order to contribute to this conversation you will need to renew your subscription.

Explain Like I'm Five: How to install a Google Font

zentoolsIf you use Zentools please post a review at the Joomla! Extensions Directory.

Hey guys, I know this has been asked all over the site but the answers are still vague to me. Basically, I want to use the Google font, Titillium for the tagline beneath my logo. Google instructs me to use this code: <link href='fonts.googleapis.com/css?family=Titillium+Web:600italic' rel='stylesheet' type='text/css'>

1) Where do I install this code, if at all using the Base3 Template?

And, bonus question:

2) In my article I have a number of styles, including h1, h2, paragraph, etc. Am I able to create my own style called, say, 'quotes' and have it as a selectable option amongst those styles (I'm using JCE)?
  • Garageast's Avatar
  • Garageast
  • LIfetime Developer - Big Bamboo
  • 270 posts
  • Karma: 0
The administrator has disabled public write access.
1) I'll need to check on the italic as it doesn't seem to render as expected

I'm adding this to the logo font box

Titillium+Web:600:latin

2) You could create a style and use the JCE style drop down but I believe their may be an issue with that at the moment

You can of course you the html editor and add the class manually
  • manh's Avatar
  • manh
  • Moderator
  • 45248 posts
  • 2106 Thanks
  • Karma: 603
The administrator has disabled public write access.
The following user(s) said Thank You: Garageast
Thanks, Paul. So the template is essentially prepped to include any Google Fonts, I just need to use that kind of formatting (Titillium+Web:600:latin) when adding to the theme?

Much appreciated. I'll keep trying with the additional style.
  • Garageast's Avatar
  • Garageast
  • LIfetime Developer - Big Bamboo
  • 270 posts
  • Karma: 0
The administrator has disabled public write access.
In the fonts input for logo yes you would add that

Try italic instead of latin as well but not entirely sure I've got that bit right

I tried this myself but couldn't get the italic to look like the google example

Will try this again later

Cheers
Paul
  • manh's Avatar
  • manh
  • Moderator
  • 45248 posts
  • 2106 Thanks
  • Karma: 603
The administrator has disabled public write access.
The following user(s) said Thank You: Garageast
If you try

Titillium+Web:600italic:latin

How does that look for you?

Cheers
Paul
  • manh's Avatar
  • manh
  • Moderator
  • 45248 posts
  • 2106 Thanks
  • Karma: 603
The administrator has disabled public write access.
paulus103 wrote:
If you try

Titillium+Web:600italic:latin

How does that look for you?

Cheers
Paul

Not having any luck. I'm trying obviously different typefaces as well, like Droid (Droid:700:latin), to test it but nothing's changing at all. To test, I entered those same values in the body font area and it does work there, so it's only the logo type that's ignoring me.

The copy in the logo module is set like this (I'v deleted the logo image and the link while I try solve this): <h4>Thunderbolt is a full service solution provider to the Southern African printing industries, representing the world's top brands for pre-press, press and post-press equipment and consumables.</h4>
  • Garageast's Avatar
  • Garageast
  • LIfetime Developer - Big Bamboo
  • 270 posts
  • Karma: 0
The administrator has disabled public write access.
Is it the same link as the other threads?
  • manh's Avatar
  • manh
  • Moderator
  • 45248 posts
  • 2106 Thanks
  • Karma: 603
The administrator has disabled public write access.
paulus103 wrote:
Is it the same link as the other threads?

Yes, just updated the database now.

garageastdev.co.za/thunderbolt/
  • Garageast's Avatar
  • Garageast
  • LIfetime Developer - Big Bamboo
  • 270 posts
  • Karma: 0
The administrator has disabled public write access.
I'm not seeing any logo at the moment - can you what you have at the moment and perhaps a screenshot of the setting?

Cheers
Paul
  • manh's Avatar
  • manh
  • Moderator
  • 45248 posts
  • 2106 Thanks
  • Karma: 603
The administrator has disabled public write access.
paulus103 wrote:
I'm not seeing any logo at the moment - can you what you have at the moment and perhaps a screenshot of the setting?

Cheers
Paul

Hi Paul, sorry, I removed the logo image to avoid complication at the moment as it's just the text that I want to adjust.

I'm copying over the template folder as well (I assume I have to do that if I've made changes in the template manager?), which will take another 10 minutes.
  • Garageast's Avatar
  • Garageast
  • LIfetime Developer - Big Bamboo
  • 270 posts
  • Karma: 0
The administrator has disabled public write access.
Cool, it's all up. I've attached a screenshot of the template theme setting.
Attachments:
  • Garageast's Avatar
  • Garageast
  • LIfetime Developer - Big Bamboo
  • 270 posts
  • Karma: 0
The administrator has disabled public write access.
I can't see a logo at the moment on the site

Can you add the font code I suggested for the logo?

and also a screenshot of it

Cheers
Paul
  • manh's Avatar
  • manh
  • Moderator
  • 45248 posts
  • 2106 Thanks
  • Karma: 603
The administrator has disabled public write access.
Hey Paul,

I was using an image for the logo but I wanted to style the text beneath the logo (still in the same logo module) using Titillium (as in this screenshot).

ScreenShot2014-11-28at5.46.58AM.png


For the sake of eliminating other issues, I deleted the logo and just left the text. I've now deleted everything and just written out the logo whilst trying to solve this. When switching over to code view in JCE, this is all there is: <h1>Thunderbolt</h1> Nothing I do in the template theme seems to affect the logo text. It works on all the other type sections such as headings and body copy, though.

Would you like me to set up a user for you?
  • Garageast's Avatar
  • Garageast
  • LIfetime Developer - Big Bamboo
  • 270 posts
  • Karma: 0
The administrator has disabled public write access.
Ah so its the tagline you are wanting to target?

Cheers
Paul
  • manh's Avatar
  • manh
  • Moderator
  • 45248 posts
  • 2106 Thanks
  • Karma: 603
The administrator has disabled public write access.
paulus103 wrote:
Ah so its the tagline you are wanting to target?

Cheers
Paul

That's right
  • Garageast's Avatar
  • Garageast
  • LIfetime Developer - Big Bamboo
  • 270 posts
  • Karma: 0
The administrator has disabled public write access.
Can you attach a screenshot of all the font selections?

Cheers
Paul
  • manh's Avatar
  • manh
  • Moderator
  • 45248 posts
  • 2106 Thanks
  • Karma: 603
Last Edit: 9 years 4 months ago by manh.
The administrator has disabled public write access.
paulus103 wrote:
Can you attach a screenshot of all the font selections?

Cheers
Paul

Like such?

ScreenShot2014-11-29at4.39.55AM.png
  • Garageast's Avatar
  • Garageast
  • LIfetime Developer - Big Bamboo
  • 270 posts
  • Karma: 0
The administrator has disabled public write access.
Hey Paul, so I finally figured a little bit out by installing the original Base3 template and comparing. I deleted all my content in that logo module and added it again using the h2 tag for the logo (in text this time) and leaving the tagline in standard paragraph. That's given me back control of the settings in the template manager and ThemeMagic as you can see from the screenshots below (still using Droid just so I can see clearly when it's changed).


ScreenShot2014-11-29at5.28.42AM.png



ScreenShot2014-11-29at5.28.57AM.png


It's quite a temperamental module. If I add the image or remove the link from the text then it suddenly reverts back to Open Sans and ThemeMagic no longer has any effect. I'm playing around trial and error. BTW, can't get the italics to work with that syntax in the template theme but I'll keep trying to figure that one out as well.
  • Garageast's Avatar
  • Garageast
  • LIfetime Developer - Big Bamboo
  • 270 posts
  • Karma: 0
The administrator has disabled public write access.
So I guess the next question would be, how can I adjust the tagline font values? I can't find that class in the css and Thememagic only allows me to adjust the tagline colour and offset (that offset is really handy though).
  • Garageast's Avatar
  • Garageast
  • LIfetime Developer - Big Bamboo
  • 270 posts
  • Karma: 0
The administrator has disabled public write access.
Yes there is something odd going on here

I thought I would be able to wrap the tagline in a heading tag but that isn't working

I will need to check on monday with the team regarding this issue and get back to you

Cheers
Paul
  • manh's Avatar
  • manh
  • Moderator
  • 45248 posts
  • 2106 Thanks
  • Karma: 603
The administrator has disabled public write access.

zentoolsIf you use Zentools please post a review at the Joomla! Extensions Directory.

Happy Campers