CODEWITHSUNDEEP
cssfirefoxfont-face
sprabhakaran
sprabhakaran

Reputation: 1635

Firefox not support font-face

Web font is not rendered properly in firefox. It working fine for Chrome browser.

Below is my CSS code,

@font-face {
    font-family: 'DINm';
    src: url('http://www.themediaverse.com.au/wp-content/themes/themediaverse/assets/fonts/DINWeb-Medium.eot');
    src: url('http://www.themediaverse.com.au/wp-content/themes/themediaverse/assets/fonts/DINWeb-Medium.eot?#iefix') format('embedded-opentype');
    src: url('http://www.themediaverse.com.au/wp-content/themes/themediaverse/assets/fonts/DINWeb-Medium.woff') format('woff');
    src: url('http://www.themediaverse.com.au/wp-content/themes/themediaverse/assets/fonts/DINComp-Medium.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;

  }

I have referred below url, CSS Font-Face url not working?

How can i resolve this problem?

Thanks.

Upvotes: 0

Views: 405

Answers (2)

Boris Zbarsky
Boris Zbarsky

Reputation: 35064

Those links are to font files that don't allow cross-site linking. Chrome doesn't follow that part of the specification, but Firefox does.

See the "published site" part https://stackoverflow.com/a/3704578/720912 for how to configure the server to allow linking to the fonts.

Upvotes: 2

Phlume
Phlume

Reputation: 3131

change the code from

format ('truetype');

to

format ('opentype');

and this should work for you.

That was listed in the article referenced from the other page near the bottom and it worked for me. This fiddle shows the working example: http://jsfiddle.net/Phlume/CMv8G/1/

You should see this:

enter image description here

The article also mentioned that for otf or ttf fonts you can leave the format section off entirely -- it is optional as the format is open type.

Upvotes: 0

Related Questions