0

I'm having trouble with my website's font rendering. The logo font renders correctly in chrome and safari but, not in firefox.

This is the css code: 

  @font-face {
  font-family: 'Bello Pro';
  src: url('./Bello Pro.otf');
}

.logo {
  font-family: 'Bello Pro';
  font-size: 40px;
  font-weight: lighter;
}

Thanks in advance

Mark charlton
  • 377
  • 3
  • 15

1 Answers1

2

Make sure your version of Firefox supports both @font-face, and your font format. You may also want to check the permissions, sometimes firefox won't render fonts according to origin policies, and/or certain formats.

You should use an online font converter and provide ALL formats of your font (otf, ttf, eot, woff, svg).

Jace Cotton
  • 2,004
  • 1
  • 21
  • 38
  • P.S., I deleted my other answer because I misread your question the first time. I thought you were saying firefox was rendering it badly, not not rendering it at all. – Jace Cotton Feb 27 '13 at 17:24
  • Hi, it is rendering in firefox but, it just isn't using the font I specified its using a default arial font. But in chrome and safari it is bello pro – Mark charlton Feb 27 '13 at 17:46
  • Right, as Firefox would if the font resource isn't there. Do you have firebug? If so try to inspect for any errors in the debugger and see if you can find anything. – Jace Cotton Feb 27 '13 at 18:53
  • Hi, I've solved this problem now. I just moved the font .otf file into a different directory and now its working. Thanks for your help – Mark charlton Feb 27 '13 at 19:29