Having trouble with fonts

Hi everyone

I know that I shouldn't be altering the classic template but my actual website isn't ready so I am only practicing to get it right on a website I no longer use.

I promise I will use a custom template for my real site but for now will stick with changing the classic template as it is going OK so far.

What I want to do is the use my header font for my headings etc and I have tried to use the cufon system but it isn't working and I am not sure why so I need some help from you guys please.

I used the cufon system to generate the jscript and didn't tie the font to a domain because the domain I am using now won't be my actual domain.

I put the scripts into the includes/templates/classic/jscript folder and edited the html_header.php in the following way:-

I then put the edited html_header.php into the includes/templates/classic/common folder as per the instructions that I found about this.

This is what is in my cufon-replace.js which was copied from somebody else's on the forum as I don't really understand how to do this but they said it pretty much covered everything so this could be where I went wrong:-

<script type="text/javascript">
Cufon.replace('h3.rightBoxHeading', {hover: true});
Cufon.replace('h2.centerBoxHeading');
Cufon.replace('#navTopContainer');
Cufon.replace('li.navTopContainer');
Cufon.replace('#navcontainer', {hover: true});
Cufon.replace('.messageStackWarning');
Cufon.replace('.messageStackError');
Cufon.replace('.messageStackSuccess');
Cufon.replace('.messageStackCaution');
Cufon.replace('#cartDefaultHeading');
Cufon.replace('#cartEmptyText');
Cufon.replace('#createAcctDefaultHeading');
Cufon.replace('#loginDefaultHeading');
Cufon.replace('#gvFaqDefaultHeading');
Cufon.replace('#discountcouponInfoHeading');
Cufon.replace('#pageThreeHeading');
Cufon.replace('#pageTwoHeading');
Cufon.replace('#pageFourHeading');
Cufon.replace('#advSearchDefaultHeading');
Cufon.replace('h2.manufacturer');
Cufon.replace('#productListHeading');
Cufon.replace('#indexCategoriesHeading');
Cufon.replace('h4.optionName');
Cufon.replace('#ezPagesHeading');
Cufon.replace('#attribsOptionsText');
Cufon.replace('#checkoutSuccessHeading');
</script>

What have I done wrong because it doesn't work?

http://gemstonecollectables.com/crystalitzy/

Thanks in advance for any help you can give me.

Cufont can be a bit of a pain. Have you considered Google Web Fonts? One line of code added to your html_header file for each font you wan't to use, then you simply call them from your stylesheet as you would any normal font.

Big selection available too.

http://www.google.com/webfonts

Hi

Thanks for that suggestion and I have been and looked at all the fonts but I really wanted to use the font I used in my header so that they match throughout the site.

Can anyone else help with Cufon or give me an alternative way to use my font on my site please?

My new site has now been registered and I am using my own template so the url is:-
https://www.crystalitzy.com/shop

I have managed to get it work for two of the sideboxes though I have no idea how I did it so I still need help with what to put in the cufon_replace to get my font to show on all the sidebox headings.

In addition the font is way too small so can I change its size without changing the font size of everything else please?

Thanks in advance.

Right, seeing as I am not getting any assistance here I am still trying to do this by myself and have managed to get my h1, h2 and h3 all working just fine with the cufon system but the sample text is also in my font but it is tiny and so cannot be read so can anyone tell me what I need to change to sort this out please?

I tried changing the font size from 62.5% but of course that increased the size of all the text and I am happy with the size of the rest of it so please can someone tell me how I can change the size of the sample text so that it doesn't affect the rest of the text?

Current cufon-replace file is:-
Cufon.replace('h3, p');
Cufon.replace('h2, p');
Cufon.replace('h1, p');

I have been working on this for several days now by myself and I was really hoping that this would be the place to come to for help.

URL of site again is:-
https://www.crystalitzy.com/shop

Faeriescraps:

Right, seeing as I am not getting any assistance here I am still trying to do this by myself and have managed to get my h1, h2 and h3 all working just fine with the cufon system but the sample text is also in my font but it is tiny and so cannot be read so can anyone tell me what I need to change to sort this out please?

I tried changing the font size from 62.5% but of course that increased the size of all the text and I am happy with the size of the rest of it so please can someone tell me how I can change the size of the sample text so that it doesn't affect the rest of the text?

Current cufon-replace file is:-
Cufon.replace('h3, p');
Cufon.replace('h2, p');
Cufon.replace('h1, p');

I have been working on this for several days now by myself and I was really hoping that this would be the place to come to for help.

URL of site again is:-
https://www.crystalitzy.com/shop

Well, this is a Zencart forum, not a Cufon forum, so you may be better off using their forum for technical help on how to use their system.

I don't know if they can help me because what I want to know is how to edit the font size in Zen Cart for the sample text without increasing the size of the text everywhere else too which is what happened when I altered the stylesheet.css body from 62.5% to a larger size, it increased the size of everything.

My issue is not with cufon now as I have that working but I need to know what to change to increase the font size so I thought that would be a Zen Cart issue, am I wrong in thinking that?

Should I just start a new topic for this?

Faeriescraps:

I don't know if they can help me because what I want to know is how to edit the font size in Zen Cart for the sample text without increasing the size of the text everywhere else too which is what happened when I altered the stylesheet.css body from 62.5% to a larger size, it increased the size of everything.

My issue is not with cufon now as I have that working but I need to know what to change to increase the font size so I thought that would be a Zen Cart issue, am I wrong in thinking that?

Should I just start a new topic for this?

This is just a CSS issue, nothing particular with Zencart. Ive never used the Cufon system, but just playing around with your style sheet in firebug, I can see its a messy system. Your H1 titles don't have a size set in the stylesheet, and if you actually make say h1 to 200px, the font doesnt actually get any bigger, it just gains large margins top and bottom.

Oh dear.

What is firebug and will that help me to sort this mess out and understand it?

I really appreciate your help as you are the only one who has even tried to help me with this first with your suggestion to use the google web fonts and now telling me that my stylesheet is a mess.

Is that due to cufon or something else as I basically created my template from an old site I had running v1.39 which possibly had some mods but it was so long ago I don't really remember what I added to be honest?

I have been trying to do everything I want with experimentation and it seems I have failed miserably so can it be salvaged?

Faeriescraps:

Oh dear.

What is firebug and will that help me to sort this mess out and understand it?

I really appreciate your help as you are the only one who has even tried to help me with this first with your suggestion to use the google web fonts and now telling me that my stylesheet is a mess.

Is that due to cufon or something else as I basically created my template from an old site I had running v1.39 which possibly had some mods but it was so long ago I don't really remember what I added to be honest?

I have been trying to do everything I want with experimentation and it seems I have failed miserably so can it be salvaged?

Its not a mess, its just the way cufon works. Its not like just using a font, its like it places images of letters over the top of original letters, but then traditional font scaling rules do not apply to them in a stylesheet. There is seperate code for the scaling of the cufon characters. Is there nothing on Google fonts close to what you have, or even better re-do your logo in the new Google font too so it all matches?

Try these.

http://www.google.com/webfonts#ReviewPlace:refine/Collection:Rouge+Script|Mr+Dafoe|Allura|Alex+Brush|Great+Vibes|Playball|Pinyon+Script

I did look at the Google web fonts originally but I definitely can't change my header because I have had my business cards and packaging sent off to printers with that font.

I have installed the CKeditor and asked on their forum about adding my font as that is possible but is another thing that I cannot work out how to do for the life of me. I have tried it on a redundant site so I don't mess up the real one too much and even though I can get my font to show up in the dropdown of the editor it doesn't actually change it so perhaps I will have better luck with their forum.

I honestly thought it was a simple matter of changing the font size using the stylesheet from Zen Cart but it appears it is much more complex than that and way over my head.

Thanks for all your help and your suggestions and I do have several of the google web fonts on my pc now to see if I can find something near enough, but then I will have to find out how to use them next.

After this I have to try to work out why my flash swf file doesn't play without refreshing the page as that is annoying me too.

Try turning the cufon off a moment and see if the flash loads fine. It may be interefering with it.

Also the other prob with cufon, is before the javascript file for it has finished loading, all your fonts are massive on the screen, then a moment later replaced by the new font, which doesnt look good.

Also regarding the flash issue, its the path to your xml file.

Have you used an absolute path, ie including http://www. etc....

Or just to the /directory/xmlfile.xml?

I turned off the cufon and it didn't make a difference though strangely the flash is appearing for me now straight away in both IE and Firefox and that was after I cleared my internet browsing history and cookies etc.

I am guessing though that it didn't show up immediately for you as it didn't for me and for someone else I asked to try the site so still think I should try to fix it if I can so....

.....the path I have for the flash is:-
<object type="application/x-shockwave-flash" data="includes/templates/crystalitzy/media/crystalitzy1.swf" width="600" height="540">

Is this OK or should it be an absolute path?

And I don't have a xml file only a swf in that directory so do I need the xml file too and if so what code do I need to add for it?

I haven't noticed the issue with my fonts loading in a massive size before being replaced so will have to ask to someone else to look at that for me too.

What other alternative do I have if I don't use Cufon?

I guess I could create images but I did try that and they didn't show up so I guess I did that wrong as well.

I really should have paid someone to do this site as it isn't working well for me at all.

I tried absolute paths and I lost the flash altogether so obviously you didn't mean that I needed absolute paths for my swf file.

I see what you mean about the huge fonts now I have seen it in IE, I was only looking at in Firefox and this doesn't happen so I didn't understand what you were saying but I can see it really clearly now in IE :o(

Ah Ive just realised Ive only ever seen this problem with flash on sites that are not using a www prefix, and yours isnt. Change your paths in your configure.php files to have the full path, http://www....etc and see if that works, and always view your site as a www version.

Worth putting this in your htaccess file too, so your site always resolves to a WWW and won't create duplicate content.

RewriteEngine on
RewriteCond %{HTTP_HOST} ^gemstonecollectables.com
RewriteRule (.*) http://www.gemstonecollectables.com/ [R=301,L]

Ah, it seems you are looking at my practice site at gemstonecollectables.com which I have given up on and am working on my actual site which is https://www.crystalitzy.com/shop as I now have the domain registered and the hosting is sorted.

I was using cufon on both sites because I was trying cufon out on the practice site along with other methods and I got really confused as to how I managed to get it how I wanted so I deleted everything to try again and now none of it works.

On my proper site I have cufon and I have also added my font to the CKeditor so I can use it everywhere if I choose to.

I still need to figure out how to stop the massive fonts from showing whilst cufon is working in IE.

As for the flash it isn't loaded on the practice site so I will try your code on my actual site substituting the gemstonecollectables.com with crystalitzy.com.

Thanks so much for all your help and I am about to do both the things you said to see if it helps with the flash issue.

dgent:

Ah Ive just realised Ive only ever seen this problem with flash on sites that are not using a www prefix, and yours isnt. Change your paths in your configure.php files to have the full path, http://www....etc and see if that works, and always view your site as a www version.

Worth putting this in your htaccess file too, so your site always resolves to a WWW and won't create duplicate content.

RewriteEngine on
RewriteCond %{HTTP_HOST} ^gemstonecollectables.com
RewriteRule (.*) http://www.gemstonecollectables.com/ [R=301,L]

Right I have changed the configure.php and the htaccess in the includes folder so was that the right place to change them both?