Firefox and IE can not find source

Navigation
7

I have a wordpress site where I installed two fonts: Calibri and Castlet. Chrome works properly, but in Firefox it recognizes only Calibri. This is the site: link

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');
}
    
asked by anonymous 17.01.2015 / 16:55

3 answers

3

Your error is in repeating the "src:" .. this is the name of the attribute, try to do so: 

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

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

    
16.04.2015 / 22:57
2

Your CSS rule at-rule , a @font-face , it has incorrect declarations, which is 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

  • Specify the 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 , .

  • Specify the sources for the other files in the most likely order of use and in a separate statement: 

    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');

  • When programming on Windows servers or Linux servers, the slope of the bar in web addresses is always / : 

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

  • Not absolutely necessary for your particular case, but source family names must be enclosed by ' or " for correct interpretation by browsers:

    W3C CSS Fonts Module Level 3 - Family Name Value

      

    The names of source families other than generics must be as a string , that is, within ' or " . Alternatively if not within quotes or sentences, they should be as a sequence of one or more identifiers.

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

    • Related

    For these cases, we can use the web-font generator on the web-site FontSquirrel which tries to generate the files suitable for each browser, as well as the style sheet with everything ready to use in our web-site.

        
    17.04.2015 / 19:18
    1

    The first suggestion is to correct the slashes 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'd notice is the content of these url() tags. The path is relative to the location of the CSS file (W3: link ).

    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.

        
    31.03.2015 / 03:10
    What is the difference between readfile and file_get_contents? Send file directly to printer via CMD