Search code examples
csshttp-redirectfontsfont-facehttp-status-code-301

Server redirect causing problems with font files

I'm a complete newb when it comes to server side issues so bear with me.

I am a having a problem were my font files are not showing up on one server, but they are showing on a another.

I'm not sure what server is hosting the actual files as I only deal with html/css.

my font declaration is: 

@font-face {
    font-family: 'Pictos';
    src: url("fonts/pictos-web.eot");
    src: local("?"), url("fonts/pictos-web.woff") format("woff"), url("fonts/pictos-web.ttf") format("truetype"), url("fonts/pictos-web.svg#webfontIyfZbseF") format("svg");
    font-weight: normal;
    font-style: normal;
}

.pictos {
    font-family:'Pictos';
    color:#FC6;
}

The css file link is:

<link rel="stylesheet" media="screen,handheld" type="text/css" href="css/global.css">

I checked the network tab and the status code was 301(moved permanently) There are images that are also being redirected though they are still showing correctly. The same with the styles in the css files. However, the server is looking for the files at: 

/css/global.css/fonts/pictos-web.woff/

when they should be like this:

 /css/fonts/pictos-web.woff

The most baffling thing is that the font works correctly in IE 9-7 but not FF, Chrome and Safari.

Solution

  • urls in .css files are relative to the css file itself, NOT the document that's using that css file. e.g.

    page: http://example.com/dir/subdir/index.php
css:  http://example.com/css/styles.css
         containing: url('foo/bar/img.jpg')

    Given that layout, the browser will try to fetch

    http://example.com/css/foo/bar/img.jpg
                   ^^^

    Your css urls should be local absolute, e.g.

     url('/foo/bar/img.jpg');
      ^---

    to ensure that the proper path is done with no browser-level "redirects".