CODEWITHSUNDEEP
firefoxcss
Alex Borsody
Alex Borsody

Reputation: 2070

@font-face not working in firefox only

Using this @font-face css. works in Chrome, Safari, and IE, only not Firefox. All required files are uploaded to the server.

CSS:

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

#header-text-webform {
  position: relative;
  top: 59px;
  left: 20px;
  font-family: 'Calgary', 'Helvetica', 'Arial', sans-serif !important;
  color: white;
  font-size: 26px;
  font-weight: normal;
  text-transform: uppercase;
  z-index: 1;
}

Upvotes: 0

Views: 374

Answers (2)

trapper
trapper

Reputation: 12003

I always use the following structure and have no issues in firefox (or anything else)

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

Upvotes: 0

David M
David M

Reputation: 72930

You have a duplicate src declaration. Remove this line:

src: url('../fonts/calgary.eot');

and see if that helps at all. If Firefox only reads this, first, src definition, it will be trying to load an EOT font which it doesn't support...

Upvotes: 1

Related Questions