font-face error when publishing project

Asked

Viewed 1,213 times

3

I’m with an MVC project.

When executed in localhost as fonts normal, but 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) http://areacursos.net/Content/fonts/fontawesome-webfont.woff

Failed to load Resource: the server responded with a status of 404 (Not Found) http://areacursos.net/Content/fonts/fontawesome-webfont.ttf

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

  • It happens when browser? I’m having a similar problem, but only in Firefox, and I’m also quite interested in a solution... (in my case I use Bootstrap, but the problematic font is the same)

  • @mgibsonbr I tested on IE and Chrome and neither of the two was!

  • How’s your directory tree? Post where are your htmls and your Resources (css,js,images,..)

  • @Leocbs, ready to go

  • This web folder is public_html/www?

  • Yes... it would be www

Show 1 more comment

1 answer

1

Problems with Webfonts are common mainly with FontAwesome. Can vary from corrupted font’s to uppercase font names.

In your case the problem is quite simple, while checking the Google Chrome error console and in the question itself we realized that the font presents a 404 error.

Checking the server http://areacursos.net/content/fonts/fontawesome-webfont.woff we realize that there really is a 404 error and we also realize that there is a reason for it.

The page you are requesting cannot 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 so it presents a 404.3 error even with the file existing. I myself last week found a similar problem with JSON.

Contact your hosting company and request to activate support.

Now about the problem with font on Firefox, That’s a story apart, basically Firefox and IE do not allow font requests from an external server as a CDN. Both server and client configuration 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 issue with Firefox on link http://davidwalsh.name/cdn-fonts

Browser other questions tagged css

You are not signed in. Login or sign up in order to post.