Why don't webfonts work with my store?

[cshart]

1.3.9x
I use webfonts all the time on my handcoded sites but for some reason they don't work when I try to apply them to zencart.

The @font-face kits at Font Squirrel are normally easy to use if you read the instructions but with zen cart don't work for me.

Any input on this would be great.

c.

[kobra]

More explanation about what you are attempting & where

[cshart]

More explanation about what you are attempting & where

You download a webkit of the font you want to use from Font Squirrel. You put the css code into the css file and the font files in the root directory.

In this case I believe it should be the directory where the store is

http://www.tishstreasures.biz/store

I tried both the store main directory and the actual root directory of the domain

Then you put class or the actual inline code for the font

For example this site uses web fonts. It is not a zen cart site but should work the same. http://www.pa-palam.org

It is the header in red Pennsylvania Chapter of Palatines to America and on the next line (Pa-Palam)

<h2 class="fontface">Pennsylvania Chapter of Palatines to America<br /><span style="margin-left: 221px;">(Pa-Palam)</h2>

then the css for fontface is

@font-face {
font-family: 'KingthingsFoundationRegular';
src: url('Kingthings_Foundation-webfont.eot');
src: local('☺'), url('Kingthings_Foundation-webfont.woff') format('woff'), url('Kingthings_Foundation-webfont.ttf') format('truetype'), url('Kingthings_Foundation-webfont.svg#webfont632lyurb') format('svg');
font-weight: normal;
font-style: normal;
}
h2.fontface {font: 30px/38px 'KingthingsFoundationRegular', Arial, sans-serif; letter-spacing: 0; color: #e65D4f;}
#coll2 {width="239px;
padding-right: 9px;
border: solid 1px #000;
}

The fonts are in the root directory.

So for the tishstreasures.biz site I put
define('HEADER_SALES_TEXT', '<h1 class="fontface">Sales Message Goes Here</h1>'); in the languages/english/classic/header.php file

this in the css file
@font-face {
font-family: 'KingthingsPetrockRegular';
src: url('Kingthings_Petrock-webfont.eot');
src: local('☺'), url('Kingthings_Petrock-webfont.woff') format('woff'), url('Kingthings_Petrock-webfont.ttf') format('truetype'), url('Kingthings_Petrock-webfont.svg#webfontb1OIS9BX') format('svg');
font-weight: normal;
font-style: normal;
}
h1.fontface {font: 24px/28px 'KingthingsPetrockRegular', Arial, sans-serif;letter-spacing: 0;}

The fonts were put in the store folder and also in the root of the domain name and are NOT showing up.

[stevesh]

I've never used this before, but the examples I've found seem to suggest you want to use font-family in the h2 rule.

Here's one:

@font-face { font-family: Delicious; src: url('Delicious-Roman.otf'); } @font-face { font-family: Delicious; font-weight: bold; src: url('Delicious-Bold.otf'); }

h3 { font-family: Delicious, sans-serif; }

No idea if that's it, but it might be something to look at.

[cshart]

I've never used this before, but the examples I've found seem to suggest you want to use font-family in the h2 rule.

Here's one:

@font-face { font-family: Delicious; src: url('Delicious-Roman.otf'); } @font-face { font-family: Delicious; font-weight: bold; src: url('Delicious-Bold.otf'); }

h3 { font-family: Delicious, sans-serif; }

No idea if that's it, but it might be something to look at.

I had to put an absolute address to the fonts and it worked so the url('mainstoreurl/fontname')

It works!!!! Yea!!!

[DrByte]

Or, you could have put the files directly into the css folder, and then add the filename extensions to the /includes/.htaccess to allow the files to be accessible. Then just mention the filenames in your .css file, instead of specifying entire URLs

[rammerson]

Hello, everyone.
I didn't see any results from this post.

I tried to put a full url directly to the font files like mentioned above. Dr. Byte do you mind instructing me on how to edit the /includes/.htaccess file?

I put the fonts in my main store directory and in a folder called fonts in my css folder for my template.

Here is a URL to the site for reference.

http://goo.gl/HHo4J

Thank you for your time in advance.

[Danielle]

I installed the webkit for my font into my Zen-Cart site, and it does work, but although it looks good in IE, it looks just awful in FF. Does anyone know how I can fix that? This is the link to the site: www.lolasboutiquenyc.com/new.

Thanks!

[gjh42]

Or, you could have put the files directly into the css folder

I put the fonts in my main store directory and in a folder called fonts in my css folder

rammerson - do you see the problem?

[FunkyBrento]

do you mind instructing me on how to edit the /includes/.htaccess file?

Go to .htaccess in the /includes folder and replace:

# but now allow just *certain* necessary files:
<FilesMatch ".*\.(js|JS|css|CSS|jpg|JPG|gif|GIF|png|PNG|swf|SWF|xsl|XSL)$">
  Order Allow,Deny
  Allow from all
</FilesMatch>

with:

# but now allow just *certain* necessary files:
<FilesMatch ".*\.(js|JS|css|CSS|jpg|JPG|gif|GIF|png|PNG|swf|SWF|xsl|XSL|ttf|otf|eot|woff)$">
  Order Allow,Deny
  Allow from all
</FilesMatch>