2

Using @font-face I tried to use some fonts for my webpage. font-face working fine when it is in localhost. When I try move it to live the font-face not working in any browser. Here is my code:

@font-face{
font-family: lucida;
src: url('../fonts/lucida.ttf');
}
.header{
 font-family:lucida;
}

When I like this it is working fine in localhost but not in live.

NOTE:I have my fonts in fonts folder, css in css folder

Rajesh
  • 123
  • 2
  • 3
  • 14
  • 2
    Can you send a link to your live site? Most of the time its a missing file or wrong path – James King Mar 11 '13 at 13:26
  • http://html.wemagination.net – Rajesh Mar 11 '13 at 13:28
  • 8
    Trying to go directly to the font file gives a 500 error for me: http://html.wemagination.net/fonts/lucida.tff Are you sure you moved the files to your live server? – Jared Mar 11 '13 at 13:33
  • Maybe the server log will give you more info about the 500 error. – Scott Simpson Mar 11 '13 at 13:36
  • I get an "Error 500" when attempting to access the file directly, but I can see the typeface in the Chrome Resources panel in the Developer Tools. As a note, web fonts should ideally be `.woff` format rather than standard `.ttf`. – Blieque Mar 11 '13 at 13:53
  • The 500 error is the problem. I looked in the chrome error log, and sure enough there is an error: Failed to load resource: the server responded with a status of 500 (Internal Server Error). I also checked the network tab, and the request to lucida.ttf was canceled. I notice that @Blieque said that there was a typeface when inspecting the resources tab, which seems to mean that chrome found the font file. However, the font it shows is a serif font. Lucida is sans-serif. This means that chrome fell back to a default font after failing to receive lucida.ttf. Fix the 500 error, and it will work. – markasoftware Mar 13 '13 at 03:29
  • @Markasoftware That makes sense, I wasn't sure which Lucida it was, there are few (http://www.pctex.com/files/managed/2/23/lucifonts.gif) :) – Blieque Mar 14 '13 at 08:43
  • the font i saw was not one of the ones in that image – markasoftware Mar 14 '13 at 23:56

3 Answers3

2

Maybe this could help: Font-Face Not loaded

It could be to do with allowing the font types on the server in IIS.

Also, I think Firefox has a bug where the font files need to be in the same folder as the CSS file.

Community
  • 1
  • 1
97ldave
  • 5,249
  • 4
  • 25
  • 39
  • Just noticed @Jrod comment on the question. My answer is irrelevant as you are getting a 500 Internal Server Error. You could maybe use my answer if you have problems after resolving the 500 Internal Server error. ;-) – 97ldave Mar 11 '13 at 13:46
0

I am not sure if this is the case, but please note that IE only supports .eot (Embedded OpenType) fonts and the fonts you have hosted will not work in Internet Explorer. Not sure if this is your problem but it is a possible problem with your code.

The way to fix this is to use a font converter. One I have used in the past is http://www.fontsquirrel.com/tools/webfont-generator. Then call both the EOT and TTF fonts within your CSS file. I have provided an example below. 

@font-face {
    font-family: Acme;
    src: url('fonts/eot/Acme-Regular.eot'),
         url('fonts/ttf/Acme-Regular.ttf');
}

If this is not the problem, I took a look at your code and I cannot find on the live site where in your CSS you actually called the @font-face command and as per the comments above I am also getting a 500 error when trying to access the fonts on your server.

Another option is to use the Google Web Fonts Library which are hosted on Google's servers and can be called remotely by your code http://www.google.com/webfonts.

grapien
  • 313
  • 3
  • 10
0

i think, it has something to do with copyright of the font.

I had the same problem, then I just find another similar font in font squirrel download them, and convert them again in font squirrel, then use their way of css font-face declaration, and it works fine now in localhost and my live website.

I even use src: url('../fonts/

mars-o
  • 1,695
  • 4
  • 23
  • 38