hit a road block with font

Permalink
Ok so im a little confused. Ive been trying to add a font to my site that will match all my other stuff like business cards etc.

so i downloaded a nice @facefonts kit from squirrel and uploaded the entire package except the html file to a new folder within my theme folder called 'fonts' i renamed the stylesheet.css inside that font to "fonts.css" (im using dark chocolate btw)

i added the following line of text to my header underneath main.css line and before typography line.

<link rel="stylesheet" media="screen" type="text/css" href="<?php echo $this->getStyleSheet('fonts/fonts.css')?>" />

then i set absolute urls in my font css file.

@font-face {
font-family: 'BankGothicMdBTMedium';
src: url(http://www.domain.com/themes/dark_chocolate/fonts/'bankgthd-webfont.eot');
src: url(http://www.domain.com/themes/dark_chocolate/fonts/'bankgthd-webfont.eot?#iefix') format('embedded-opentype'),
url(http://www.domain.com/themes/dark_chocolate/fonts/'bankgthd-webfont.woff') format('woff'),
url(http://www.domain.com/themes/dark_chocolate/fonts/'bankgthd-webfont.ttf') format('truetype'),
url(http://www.domain.com/themes/dark_chocolate/fonts/'bankgthd-webfont.svg#BankGothicMdBTMedium') format('svg');
font-weight: normal;
font-style: normal;

}

all this made sence :-)


Now the dumb bit. how do i get the font as my default font. or even so i can use it at all

Any help with this would be greatly apreciated. Im not completely new to css but im no expert

Thanks all

 
arrestingdevelopment replied on at Permalink Reply
arrestingdevelopment
I've never used a Font Squirrel font kit before, but based off of what you're showing, you just need to add the 'BankGothicMdBTMedium' font name into the font stack for any CSS items you want to use this font.

Not to assume you don't know this, but just in case:
In CSS, the font stack is the hierarchical listing of fonts you want an item to use... providing a list of fall-back fonts in case the user's computer doesn't have your first-choice font installed. They usually look something like this:

font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;


This tells the browser to load "Arial" as the font. If the browser can't find Arial installed, it will then try "Helvetica Neue", then "Helvetica" and will finally just use whatever font it has been assigned to use as a "sans-serif" font. Notice that font names that are more than a single word are enclosed in quotes.

SO... you could edit the "Main.css" file of your theme to put 'BankGothicMdBTMedium' as the first font in the comma-separated list of fonts. You could do that on the "body" tag and it would affect everything... but you may want to "contain" it by looking at the structure of your site (if you have Firefox, get the Firebug Add-On and you can use that to inspect the structure of your site to get an idea of the element(s) you want to affect) and adding the font-family declaration to a different element... like "#page" or something like that (many themes/designs have a div that contains the content, often to set the width and center it on the screen... this is a good candidate to target, as applying the font to the "body" tag can have some impact on page loading speed and could affect the Concrete 5 interface items, too.

Hope this helps!

- John
fizzyhair replied on at Permalink Reply
I'd pretty much Gotten that far in that I was looking for a stack but when I couldn't find one for dark chocolate I was stonewalled. I've no idea where the theme stack is. It's not in the main.css or the typography.css so where have they hidden it lol

Great advise though I really appreciate you responding and giving your time on this.

I tried calling the font using HTML, php and CSS in content to no avail also in 4 browsers. 5 if you include the iPhone lol.
arrestingdevelopment replied on at Permalink Reply
arrestingdevelopment
Hmmm... when I look in the "main.css" file for the Dark Chocolate theme, the very first declaration is:
body { 
   /* customize_body */ font: normal normal 13px Arial; /* customize_body */
   /* customize_body */ color: #777777; /* customize_body */
   line-height:18px;
}


So... if you change the "font: normal normal 13px Arial;" to

"font: normal normal 13px 'BankGothicMdBTMedium', Arial;"

that should work.

If that doesn't work for you, can you post a link to your site so that I can take a look?

- John
fizzyhair replied on at Permalink Reply
Reinstalled theme and found font stack in main.css so that was a start :-D Thanks


Heres my entire typography file

body {
/* customize_body */ font: normal normal 13px BankGothicMdBTMedium; /* customize_body */
/* customize_body */ color: #777777; /* customize_body */
line-height:18px;
}

img {border: 0px}
a,a:visited,a:active {
/* customize_link */ color: #614F3F; /* customize_link */
text-decoration:none;
}
a:hover {
/* customize_link_hover */ color: #81613F; /* customize_link_hover */ text-decoration:underline;
}

h1,h2,h3,h4,h5{ margin:0px 0px 4px 0px; padding:4px 0px; margin-top:8px }
h1{ font: normal normal 21px BankGothicMdBTMedium; line-height:28px }
h2{ font-size:18px; line-height:24px }
h3{ font-size:16px; line-height:21px }
h4{ font-size:14px; line-height:18px }
h5{ font-size:13px; line-height:16px }
p{ padding:0px 0px 0px 0px; margin:0px 0px 12px 0px; }

Ive addedBankGothicBTMedium to the stack as i would normally... still no font lol
arrestingdevelopment replied on at Permalink Reply
arrestingdevelopment
Try putting it in single quotes like this:
'BankGothicMdBTMedium'


I'm not sure it matters, but it may be necessary if that's the way the font-squirrel font kit is referencing it.

Also... in looking closer at the @font-face rules from your fonts.css file... it looks like your src:url(); lines are a little messed up. Everything inside the parentheses for the src:url(); should be in quotes. So it should look like this:
src: url('http://www.domain.com/themes/dark_chocolate/fonts/bankgthd-webfont.eot');

Right now, all you have in quotes is the font file name... the whole path should be in quotes.

Also... the path MAY need to be relative to the fonts.css file, not absolute. So you may have to change that to this:
src: url('bankgthd-webfont.eot');

Since the fonts.css file and the font files are in the same folder.

And... it would be a big help to be able to actually see the site if you have a URL to it somewhere on the web. Being able to inspect the source code and use Firebug to look for files not loading, etc., is a big help in troubleshooting.

- John

P.S... in the long run, you're going to NOT want to make edits to the core themes found in the "/concrete/themes" folder. Next time there's an upgrade/update to Concrete5, your changes could get overwritten. You should really copy the theme from there to the "/themes" folder... and rename it. Do a search on the forums here on how to do that and you should find loads of stuff.
fizzyhair replied on at Permalink Reply
www.danbennetto.com

Ive done a full fresh install to mess about on so i dont screww anything important up.

Thankyou again man
arrestingdevelopment replied on at Permalink Reply
arrestingdevelopment
Thanks for the link!

Take a look in your theme's elements folder for the "header.php" file and double-check (then TRIPLE-check) what you put in for the line to add your fonts.css stylesheet. There must be an error, because this is what's showing up in your source:
<link rel="stylesheet" media="screen" type="text/css" href="<br />
<b>Warning</b>:  Division by zero in <b>/home4/fizzyhai/public_html/concrete/themes/dark_chocolate/elements/header.php</b> on line <b>10</b><br />
/index.php/tools/css/themes/dark_chocolate/css" />

Try putting this there instead:
<link rel="stylesheet" media="screen" type="text/css" href="<?php echo $this->getThemePath(); ?>/fonts/fonts.css')?>" />

- John
fizzyhair replied on at Permalink Reply
I've done everything you suggesteted I don't see that it's made any difference. Has the error gone?
arrestingdevelopment replied on at Permalink Best Answer Reply
arrestingdevelopment
ALMOST!

There's just one small error (my fault this time... mea culpa!). The code I gave you for putting the link to your fonts.css file in the theme's elements/header.php file was wrong (SORRY!). Try replacing it with this one:
<link rel="stylesheet" media="screen" type="text/css" href="<?php echo $this->getThemePath(); ?>/fonts/fonts.css" />

Pop that in and refresh your browser and you should see your site in all of its 'BankGothicMdBTMedium' glory! ;D

- John
fizzyhair replied on at Permalink Reply
I really am greatfull. This has been doing my head in all day. I just can't seem to get it right.
fizzyhair replied on at Permalink Reply
Yea I spotted that just as I got the notification you'd replied lol. Thankyou sooo much you are a very clever gent. Consider your good deed for the day well and turkey done.

Dan
arrestingdevelopment replied on at Permalink Reply
arrestingdevelopment
No problem. Glad it's working now.

And I know how you feel. I have days like that, too. Where it just feels like you can't get something that SEEMS reasonably simple to work. And you beat your head against it all day. For me, I usually find that I can fix it in like 10 seconds flat... the next day... after a good night's sleep! LOL!

Glad to be of help (I'm new enough on here myself that I've been TAKING a lot of assistance, so it's nice to be able to GIVE some now!).

Good luck with the site!

- John