Joomlabamboo Support Forum :: Topic: add custom fonts to Sidetrack template (1/1) | Joomlabamboo

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.

add custom fonts to Sidetrack template

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

11 years 2 months ago

Hey there,

I am attempting to add a custom font to my css styles on the following site: www.fleron-iversen.com/sites/steinerskoleportalen/index.php/poedagogikken.

I have converted the font to .eot, .svg, .ttf and .woff at www.mashape.com/warting/Online-font-converter#endpoint-ConvertFont and I have uploaded them into a folder called fonts in my template folder.

I have tried absolute and relative path URL in my css. Here is the code I put together:
@font-face {
font-family: 'KozGoPro Light';
src: url("../fonts/KozGoPro-Light-webfont.eot") format('eot');
src: local("☺"),
url("../fonts/KozGoPro-Light.otf"),
url("../fonts/KozGoPro-Light-webfont.woff") format('woff')
url("../fonts/KozGoPro-Light-webfont.ttf") format('truetype'),
url("../fonts/KozGoPro-Light-webfont.svg") format('svg');
font-weight: normal;
font-style: normal;
}

h1,h2,h3,h4, h5,h6,.blockquote, .componentheading, .contentheading {font-family: KozGoPro Light, Verdana, Helvetica; color:#353e4d; text-transform: uppercase;}
a#zenpanelopen {font-family: KozGoPro Light, Verdana, Helvetica;}
.menu {font-family: KozGoPro Light,Verdana, Helvetica;}

I also altered the fonts.css file in the zengridframework/css folder. I didn't add the @font-face css code to that file though.

What is loading to the font is Verdana my second preference. Am I missing something? I figured I could just use the @font-face function, but perhaps the zengrid font setup is conflicting? What would be my best approach with a zengrid framework template? Incidentally, my uppercase style is not showing in Chrome.

Appreciate your help. Thanks.

Nya

Nya Fleron
LIfetime Developer - Big Bamboo
284 posts
3 Thanks
Karma: 2

The administrator has disabled public write access.

11 years 2 months ago

Hi

Have you tried adding a absolute url to the fonts in this page?

/plugins/system/zengridframework/zengridframework/index.php and then calling the fonts

I'm referencing this thread

www.joomlabamboo.com/forum/blanko/85393-google-fonts

Thanks
Paul

manh
Moderator
45248 posts
2106 Thanks
Karma: 603

The administrator has disabled public write access.

11 years 2 months ago

Hi Paul,

Thanks for the thread.
I added this to the <head> of the file you referred to:
<link href="www.fleron-iversen.com/sites/steinerskoleportalen/templates/jbsidetrack/fonts" rel="stylesheet" type="text/css">

And it still doesn't do anything... this is a link tag to a css not a directory though, so I am not sure how this would work anyway. Is there something I am missing?

Nya

Nya Fleron
LIfetime Developer - Big Bamboo
284 posts
3 Thanks
Karma: 2

The administrator has disabled public write access.

11 years 2 months ago

Hi
check this error message:

GET www.fleron-iversen.com/sites/steinerskoleportalen/templates/jbsidetrack/fonts/ 403 (Forbidden)
So this is reason why you don't see font...they are not referenced from any file because browser is not able to open fonts directory. Check this issue with your hosting company.

Zuzuzu
LIfetime Developer - Big Bamboo
1925 posts
107 Thanks
Karma: 67

The administrator has disabled public write access.

10 years 11 months ago

Hey everybody,

I gave up on setting up the custom font idea - it slows down everything too much. I am using google fonts. I have been looking through different posts about how to add an extra google font that is not in your current font stacks and settings, but I can't get it to work.

The font that I want to use is Julius Sans One: <link href='fonts.googleapis.com/css?family=Julius+Sans+One' rel='stylesheet' type='text/css'>

I added the above google link in the <head> of the file in the zengridframework: /plugins/system/zengridframework/zengridframework/index.php

then I added the following css to the heading styles in type.css file in /plugins/system/zengridframework/zengridframework/media/css directory:
font-family: 'Julius Sans One', sans-serif;

In the template manager I have set the font family headings dropdown to Cambria....

When I look in Firebug, the headings are set to Didact which is the google font from the stack that I am using for the navigation and font-family body. Is there something I am missing? The Cambria font should at least show, if not the Julius google font.

I appreciate your help. Thanks.

Nya

Nya Fleron
LIfetime Developer - Big Bamboo
284 posts
3 Thanks
Karma: 2

The administrator has disabled public write access.

10 years 11 months ago

Can you turn off compression please

Thanks
Paul

manh
Moderator
45248 posts
2106 Thanks
Karma: 603

The administrator has disabled public write access.

10 years 11 months ago

Hi Paul,

I turned it off. Now Cambria font shows up, but how do I get my extra google font to show?

Thanks.

Nya

Nya Fleron
LIfetime Developer - Big Bamboo
284 posts
3 Thanks
Karma: 2

The administrator has disabled public write access.

10 years 11 months ago

Not 100% sure Nya but does adding !important after the css rule fix the issue?

Anthony Olsen
LIfetime Developer - Big Bamboo
23925 posts
788 Thanks
Karma: 433

The administrator has disabled public write access.

10 years 11 months ago

Hi Anthony,

Thanks for the idea. It worked! Yeah I got my headings working. I added the "!important" into the css

So the css files I have changed are:
theme.css in the template directory
type.css in plugins/zengridframework/media/css

where I added: font-family: 'Julius Sans One', sans-serif !important;
to all of my headings

and I added the google reference info to the head of the index.php in plugins/zengridframework/zengridframework:
<link href='fonts.googleapis.com/css?family=Julius+Sans+One' rel='stylesheet' type='text/css'>

Just in case someone else is interested.

Thanks again.

Nya

Nya Fleron
LIfetime Developer - Big Bamboo
284 posts
3 Thanks
Karma: 2

The administrator has disabled public write access.

10 years 11 months ago

Hi Nya,

Thanks for posting back

+1

The important is also required if using a T3 template as well

Cheers
Paul

manh
Moderator
45248 posts
2106 Thanks
Karma: 603

The administrator has disabled public write access.

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

Happy Campers