Css @Font-Face Not Working With Firefox, But Working With Chrome and Ie

font-face working in chrome but not in firefox and ie

try with

@font-face {
  font-family: 'Deer';
  font-weight: normal;
  font-style: normal;
  src: url('fonts/Deer.woff') format('woff'),
       url('fonts/Deer.eot') format('eot'),
       url('fonts/Deer.ttf') format('ttf');
}

i dont think more than 1 src-argument is allowed in @font-face.

CSS @font-face not working with Firefox, but working with Chrome and IE

LOCALLY RUNNING THE SITE (file:///)

Firefox comes with a very strict "file uri origin" (file:///) policy by default: to have it to behave just as other browsers, go to about:config, filter by fileuri and toggle the following preference:

security.fileuri.strict_origin_policy

Set it to false and you should be able to load local font resources across different path levels.

PUBLISHED SITE

As per my comment below, and you are experiencing this problem after deploying your site, you could try to add an additional header to see if your problem configures itself as a cross domain issue: it shouldn't, since you are specifying relative paths, but i would give it a try anyway: in your .htaccess file, specify you want to send an additional header for each .ttf/.otf/.eot file being requested:

<FilesMatch "\.(ttf|otf|eot)$">
    <IfModule mod_headers.c>
        Header set Access-Control-Allow-Origin "*"
    </IfModule>
</FilesMatch>

Frankly, I wouldn't expect it to make any difference, but it's so simple it's worth trying: else try to use base64 encoding for your font typeface, ugly but it may works too.

A nice recap is available here

@font-face is not working on Chrome, Firefox, IE

Ryan is right. I replaced your URL with a working URL and it works absolutely fine.
This is what I used.

    @font-face {
    font-family: 'ma';
    src: url('http://www.cse.buffalo.edu/~rsd7/BaroqueScript.ttf');
}


.menu_head {
    width: 100%;
    position: relative;
    height: 30px;
    font-family: 'ma';
}

@font-face works in Chrome, but not IE or Firefox

Poking around I found this interesting tidbit for Firefox:

Same-origin rule: By default, Firefox will only accept relative links. If you want to use absolute links or include fonts from different domains, you need to send these fonts with Access Control Headers.

Try changing those font URLs to relative and see if that helps:

@font-face {
    font-family: 'LeagueGothicRegular';
    src: url('/wp-content/themes/twentytenchild/League_Gothic-webfont.eot');
    src: url('/wp-content/themes/twentytenchild/League_Gothic-webfont.eot?#iefix') format('embedded-opentype'),
         url('/wp-content/themes/twentytenchild/League_Gothic-webfont.woff') format('woff'),
         url('/wp-content/themes/twentytenchild/League_Gothic-webfont.ttf') format('truetype'),
         url('/wp-content/themes/twentytenchild/League_Gothic-webfont.svg#LeagueGothicRegular') format('svg');
    font-weight: normal;
    font-style: normal;
}

edit: see Korpela's answer; the problem was the mismatch from the 'www' subdomain. You should probably keep the URLs relative, though.

@font-face not working on chrome or firefox

You're only including the .ttf format which is for certain versions of WebKit, instead include multiple font formats for cross-browser support:

@font-face {
font-family: 'MyWebFont';
src: url('webfont.eot'); /* IE9 Compat Modes */
src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
     url('webfont.woff') format('woff'), /* Modern Browsers */
     url('webfont.ttf')  format('truetype'), /* Safari, Android, iOS */
     url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}

You also need to add the @font-face rule before using it on any element ..

---

Related Topics