CODEWITHSUNDEEP
htmlfontscssfont-face
Sam
Sam

Reputation: 15506

CSS3 custom Font Face not working well in html view

Dear folks, Im trying to figure out what is wrong in here, why the fonts set do not show up correctly in html live view in FireFox 4... I am clueless! Any insight will be greatly appreciated by me. Any at all! Thanks in advance. Cheers!

<style type="text/css" rel="stylesheet">
@charset "utf-8";

@font-face{
  font-family: "ZZZ";
  src: local('FONT'),
      url('http://www.site.org/FONT.ttf') format('truetype'),
      url('http://www.site.org/FONT.eot') format('eot'),
      url('http://www.site.org/FONT.otf') format ('otf'),
      url('http://www.site.org/FONT.woff') format('woff')
}

html, body{font-family: "ZZZ" !important}

.

PS. I changed the name to "ZZZ" deliberately into something else than the local file name "FONT" so that way I can assure that if someone does NOT have the font locally, it will proceed to download CSS3 url. This however does not work... (when changing ZZZ to Lithos Pro Regular, it works but that is no challenge... I want it to work naturally when no local font file is present.

Upvotes: 2

Views: 3920

Answers (3)

HyderA
HyderA

Reputation: 21371

Try placing the local font like this instead:

html, body{font-family: "LithosProRegular", "ZZZ" !important}

Upvotes: 1

Amit
Amit

Reputation: 22076

Internet Explorer only supports .eot type fonts and Firefox, Chrome, Safari, and Opera support .ttf and .otf type fonts.

Upvotes: 1

Rob
Rob

Reputation: 1255

There is an excellent guide here

http://blog.themeforest.net/tutorials/how-to-achieve-cross-browser-font-face-support/

Looks like this could be a version support issue - what version of firefox you using?

Upvotes: 2

Related Questions