Error of font-face when publishing project [closed]

Question

Error of font-face when publishing project [closed]

Navigation

#1 by (1 votes)

3

I'm having an MVC project.

When executed in localhost the fonts is normal, however when publishing to the server they give error.

CSS

@font-face {
    font-family: 'FontAwesome';
    src: url('../fonts/fontawesome-webfont.eot?v=4.0.1');
    src: url('../fonts/fontawesome-webfont.eot?#iefix&v=4.0.1') format('embedded-opentype'),
        url('../fonts/fontawesome-webfont.woff') format('woff'),
        url('../fonts/fontawesome-webfont.ttf')  format('truetype'),
        url('../fonts/fontawesome-webfont.svg?v=4.0.1#fontawesomeregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

Error

Failed to load resource: the server responded with a status of 404   (Not Found)    link

Failed to load resource: the server responded with a status of 404   (Not Found)    link

File tree:

Web/Content/css
        - font-awesome.min.css 
Web/Content/fonts
        - FontAwesome.otf
        - fontawesome-webfont.svg
        - fontawesome-webfont.woff
        - glyphicons-halflings-regular.svg
        - glyphicons-halflings-regular.woff
Web/Views/Shared
        - _Layout.cshtml
Web/Views/Home
        - index.cshtml

css

asked by anonymous 19.03.2015 / 23:13

1 answer

Bootstrap Grid for Form Consider the final validity until the next day at 03 AM using PLSQL

score 1 · Answer 1

Problems with WebFonts are mostly common with FontAwesome . It can vary from the corrupted font's to uppercase letters in the font name.

In your case the problem is very simple, when checking the error console of Google Chrome and the question itself we noticed that the font has a 404 error.

Verifying the server link we realize that there is a 404 error and we also realize that there is a reason for that.

The page you are requesting can not be served because of the extension configuration. If the page is a script, add a handler. If the file should be downloaded, add a MIME map.

Apparently your hosting is not configured for this type of file and therefore presents a 404.3 error even with the existing file. I myself encountered a similar problem last week with JSON .

Contact your hosting company and request to enable support.

Now about the problem with the font in Firefox , this is a story the part , basically Firefox and IE do not allow font requests from an external server like a CDN. Both a server and a client configuration are required.

The code below should solve the problem.

# Apache config
<FilesMatch ".(eot|ttf|otf|woff)">
    Header set Access-Control-Allow-Origin "*"
</FilesMatch>

# nginx config
if ($filename ~* ^.*?\.(eot)|(ttf)|(woff)$){
    add_header Access-Control-Allow-Origin *;
}

More information about this problem with Firefox at link