CODEWITHSUNDEEP
css
Mee
Mee

Reputation: 825

@font-face not working with firefox and IE

I have this to attach custom font into my page

@font-face {
    font-family: "Pushkinf";
    src: url(../fonts/pushkin.ttf);
}

It works on Safari and Google Chrome, but doesn't work on firefox and IE. Why is this happening and how to fix this?

Upvotes: 1

Views: 69

Answers (2)

Dinesh Kanivu
Dinesh Kanivu

Reputation: 2587

First of all You need to check the format of fonts Which Supports different browser

enter image description here

U need to Give Like this

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

Checkout for More details about the .eot fornt here

Upvotes: 0

jonsuh
jonsuh

Reputation: 2875

For proper cross-browser support, you'd need to utilize multiple font formats.

@font-face {
  font-family: "Pushkinf";
  src: url('../fonts/pushkin.eot');
  src: url('../fonts/pushkin.woff') format("woff"),
       url('../fonts/pushkin.ttf') format("truetype"),
       url('../fonts/pushkin.svg#Pushkinf') format("svg");
}

Upvotes: 1

Related Questions