Firefox and IE cannot find source

Question

I have a wordpress site where I installed two fonts: Calibri and Castlet. Chrome works correctly, but Firefox only recognizes Calibri. This is the site: http://plengenharia.syswebapp.com.br/

In Css:

@font-face {
font-family: Calibri;
src: url("wp-includes\fonts\calibri.ttf") format('truetype'), src: local("Calibri"), url("wp-includes\fonts\calibri.eot"), url("wp-includes\fonts\calibri.eot?#iefix") format('embedded-opentype'), url('wp-includes\fonts\calibri.woff') format('woff');
}

@font-face {
font-family: Castlet;
src: url("wp-includes\fonts\Castlet.ttf") format('truetype'), src: local("Castlet"), url("wp-includes\fonts\Castlet.eot"), url("wp-includes\fonts\Castlet.eot?#iefix") format('embedded-opentype'), url('wp-includes\fonts\Castlet.woff') format('woff');
}

Answer 1

your error is in repeating "src:".. that is the name of the attribute, try to leave it so:

src: url(...)..., url(...)...

if you notice in the 2 examples you repeat src: 2x

Answer 2

Your rule of CSS at-rule, to @font-face, meets with incorrect statements, reason why it is not interpreted by some browsers.

Correct formatting

@font-face {
    font-family: 'Calibri';
    src:
        local('Calibri'),
        url('wp-includes/fonts/calibri.ttf');
    src:
        url('wp-includes/fonts/calibri.eot'),
        url('wp-includes/fonts/calibri.eot?#iefix') format('embedded-opentype'),
        url('wp-includes/fonts/calibri.woff') format('woff'),
        url('wp-includes/fonts/calibri.ttf') format('truetype');
}

Explanation

1. Specify search by "local source" before any other address:

   src:
       local('Calibri'),                       /* local */
       url('wp-includes/fonts/calibri.ttf');   /* remoto */
   

   Note that this statement should end with ; and not with ,.

2. Specify sources for other files in the most likely order of use and in a separate declaration:

   src:
       url('wp-includes/fonts/calibri.eot'),
       url('wp-includes/fonts/calibri.eot?#iefix') format('embedded-opentype'),
       url('wp-includes/fonts/calibri.woff') format('woff'),
       url('wp-includes/fonts/calibri.ttf') format('truetype');
   

3. When programming on Windows servers or Linux servers, the tilt of the bar on the web addresses is always /:

   "http://www.example.com/fonts/minhaFonte.eot"
   

4. Not absolutely necessary for your particular case, but the names of the source families must be involved by ' or " for a correct interpretation by the browsers:

   W3C CSS Fonts Module Level 3 - Family Name Value

   The names of source families other than generics have to look like one string cited, that is, within ' or ". Alternatively, if not within quotation marks or quotes, they should be as a sequence of one or more identifiers.

   In your case it turns out to be irrelevant because it’s a single word Calibri, but it is the note for future readers.

Related

For these cases, we can use the generator of web-font present on the web-site Fontsquirrel which seeks to generate the right files for each browser as well as the ready-to-use style sheet on our web-site.

Answer 3

The first suggestion is to fix the bars, since Urls use /.

src: url("wp-includes/fonts/Castlet.ttf") format('truetype'), src: local("Castlet"), url("wp-includes/fonts/Castlet.eot"), url("wp-includes/fonts/Castlet.eot?#iefix") format('embedded-opentype'), url('wp-includes/fonts/Castlet.woff') format('woff');

The second thing I would observe is the content of these tags url(). The path is relative to the location of the CSS file (W3: http://www.w3.org/TR/REC-CSS1/#url).

Something like

url("/wp-includes/fonts/Castlet.eot")

or (preferably)

url("http://plengenharia.syswebapp.com.br/wp-includes/fonts/Castlet.eot")

can solve your problem.