CODEWITHSUNDEEP
firefoxcssfont-face
Matthew Branch
Matthew Branch

Reputation: 11

A custom font-face in css not working on firefox

I've searched every where for a reason why font-face is not working properly in firefox. I have found several different answers but none seem to fix the problem. If any one could give me some hints that would be great.

CSS CODE:

@font-face
{
    font-family:Viking-Normal;  
    src: url('../fonts/VIKING.eot') format("opentype"),   
    url('../fonts/VIKING.ttf') format("truetype");   
}

div#header
{
    font-family:Viking-Normal !important;
    font-size:58px;
    text-align:center;
    width:780px;
    height:150px;
    background:#0078A8;
    margin-left:auto;
    margin-right:auto;
}

Update working CSS:

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

Upvotes: 1

Views: 3152

Answers (1)

Zuul
Zuul

Reputation: 16269

It would help to know what you've tried already, but by looking at your code three things come to mind:

  1. The font family name should be between a single or double quote.

    e.g.,

    font-family: 'Viking-Normal';


  2. The path to your fonts may be wrong, can you access it directly from the browser by placing the full URL path until it?


  3. The font file that your browser supports may be corrupted or absent. I use font squirrel to generate the required CSS and fonts files needed.

    You just need to upload your font file, it will pop out a .zip containing a demo with your font, a css-ready file and the formats required for better cross-browser support.

    e.g.,

    @font-face {
    font-family: 'VikingRegular';
    src: url('viking-webfont.eot');
    src: url('viking-webfont.eot?#iefix') format('embedded-opentype'),
         url('viking-webfont.woff') format('woff'),
         url('viking-webfont.ttf') format('truetype'),
         url('viking-webfont.svg#DearestRegular') format('svg');
    font-weight: normal;
    font-style: normal;
}

Upvotes: 2

Related Questions