Having issues with a custom font on my Storenvy page

Question

I'm using a web font from FontSquirrel, that provided the webfont kit. I currently have the files in the root folder of "StilettoRedBand.com" but in my Storenvy page (stilettored.storenvy.com) the webfont isn't working in the title, or the footer.

I've been working on this project so much that I've appeared to have missed something and am having a hard time locating the issue, as it was working at first and then just stopped.

Can anyone help me out?

Here's the font source: http://www.fontsquirrel.com/fonts/WC-Mano-Negra-Bta

it would be better if you posted some of your CSS – Ashesh May 29 '15 at 07:40 — Ashesh, May 29 '15 at 07:40

Mikatsu · Answer 1 · 2013-03-16T20:25:43.340

0

try that

@font-face {
font-family:WCManoNegraBta;
font-weight:bold;
src:url("path-to-the-font-file/WCManoNegraBta.otf") format("opentype");}

div {
  font-family:WCManoNegraBta;
}

edited Mar 16 '13 at 20:25

answered Mar 16 '13 at 19:56

Mikatsu

530
2
4
15

Hey Mikatsu, no luck with that. – Dylan Polniak Mar 16 '13 at 20:22
u ve used it on your element? maybe just your browser dont support the format u provided on your link. – Mikatsu Mar 16 '13 at 20:25
Hey Mikatsu, it is currently being used on the element. It appears to not be working in only Firefox on my Mac now. – Dylan Polniak Mar 16 '13 at 20:32
http://www.w3schools.com/css3/css3_fonts.asp Firefox, Chrome, Safari, and Opera support fonts of type .ttf (True Type Fonts) and .otf (OpenType Fonts). Internet Explorer 9+ supports the new @font-face rule, but it only supports fonts of type .eot (Embedded OpenType). – Mikatsu Mar 16 '13 at 20:38

score 0 · Answer 2 · answered Mar 17 '13 at 10:35

You need to make sure you got all the needed font-files (.eot, .ttf, .woff and .svg). Click the "Webfont kit" tab and download the whole package. Use this code and make sure your links are correct. You should also try removing 'text-rendering: optimizeLegibility;' if you are using this.

@font-face {
font-family: 'WCManoNegraBtaRegular';
src: url('WCManoNegraBta-webfont.eot');
src: url('WCManoNegraBta-webfont.eot?#iefix') format('embedded-opentype'),
     url('WCManoNegraBta-webfont.woff') format('woff'),
     url('WCManoNegraBta-webfont.ttf') format('truetype'),
     url('WCManoNegraBta-webfont.svg#WCManoNegraBtaRegular') format('svg');
font-weight: normal;
font-style: normal;
}

Hey, none of this is working in Firefox. Since Storenvy doesn't host the font, should I be doing something differently? It would be structured like this: src: url('http://stilettoredtix.com/bandsite/WCManoNegraBta... — Dylan Polniak, Mar 20 '13 at 09:27

score 0 · Answer 3 · edited May 23 '17 at 12:30

I am having the same issue with firefox for my storenvy store. Here is the fix I found:

How to add an Access-Control-Allow-Origin header

You just need the following code in a .htaccess file in the same folder as your fonts:

<FilesMatch "\.(ttf|otf|eot|woff)$">
  <IfModule mod_headers.c>
    Header set Access-Control-Allow-Origin "*"
  </IfModule>
</FilesMatch>

I haven't gotten it to work yet, but my website is hosted on godaddy so I don't know if my issue is related to that or not.

Good luck!

score 0 · Answer 4 · edited May 29 '15 at 07:37

I was having the same problem! After reading this article I ended up getting the font to work for me.

What I did was add the @font-face code into my hosting site and saved it as a.css file

Example: http://lovepollution.com/andadrifont.css

Then I went to the theme section and clicked "css mode". I added below on the style sheet.

@import url('http://lovepollution.com/andadrifont.css');

Saved and works now.

Having issues with a custom font on my Storenvy page

4 Answers4