webfont that does not appear on iphone and firefox

Question

Hello (sorry for english i'm french),

The problem is that the font used is not displayed in firefox nor in iOS.

Here is the code :

@font-face {
    font-family: 'ProximaNova-Regular';
    src: url('webfonts/2ACFD6_0_0.eot');
    src: url('webfonts/2ACFD6_0_0.eot?#iefix') format('embedded-opentype'),
    url('webfonts/2ACFD6_0_0.woff') format('woff'),
    url('webfonts/2ACFD6_0_0.ttf') format('truetype'),
    url('webfonts/2ACFD6_0_0.svg#wf') format('svg');
}

For the body element :

font: normal 1.25em/1.2 ProximaNova-Regular;

I tried several things for iOS :

AddType image/svg-xml svg
AddType image/svg-xml svgz

And for Firefox :

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

I also checked in the file .svg there is the id wf on the font tag.

THANKS

Answer 1

The web font doesn’t appear on Chrome or IE either. The reason is simply that the font resources referred to do not exist, i.e. the URLs like http://www.anthonyblochet.fr/css/webfonts/2ACFD6_0_0.woff cause a 404 Not Found response.

Answer 2

Instead of

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

Try

<FilesMatch "\.(eot|otf|woff|ttf)$">
  SetEnvIf Origin »
    "^http(s)?://(.+\.)?(domain1\.org|domain\.com)$" origin_is=$0
  Header set Access-Control-Allow-Origin %{origin_is}e env=origin_is
</FilesMatch>