Custom font is not working in Firefox.

1 Views

I have searched for its solution, and I think, I’m doing everything like the suggestions, but it is still not working. Custom font works on Chrome, IE, but not in Firefox. I have used font face generator to generate fonts and the code. I have placed the @font-face code in header, custom.css file (in theme_root/css/) and also in style.css, but it is not working.

Placed this in header.php:

Read More
<style>

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

Placed this in style.css: 

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

Placed this in custom.css: 

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

Working everywhere, except Firefox. I’m confused
http://tour.khujbo.com

Also, this font works in html pages in Firefox fine. I have used this font in this template and it works on Firefox: http://khujbo.com. Seems to me, that the problem with Firefox and WordPress combination.

What should I do?

Post Views: 1

Related posts

Leave a Reply

3 comments

  1. I don’t think you need to define this font-face everywhere. You can place the CSS only in custom.css. And, you have defined the "Bebas Neue" font-face in your header.php with wrong URL. CSS is trying to get the font (woff, ttf, etc) from http://tour.khujbo.com/fonts/. Please correct your CSS with the right location.

    BTW, my suggestion would be, you just place and load the CSS only from custom.css and remove all other definitions.

    Hope this will solve your problem.

  3. be sure u converted font to all format try this site to do http://everythingfonts.com/font-face and the path should be right !

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

h1,h2,h3,h4,h5,h6{
font-family: 'GE SS Unique';

    }