Search code examples
csslocalhostfont-face

CSS acting different on localhost


I'm working on a website, and I wanted to show it to someone. So I set up a webserver. Now I'm getting some strange behavior when I'm trying to reach the website via LAN instead of using my localhost.

First of all, when I visit the page in my localhost, everything seems to be rendered much smaller. I designed the page at a width etc. because it looks good. Now when I visit the site it fills up the whole page.

Secondly, I'm using @font-face for the titles etc. This works on my localhost, but not when I visit the page via my network.

And last, when I visit the page on my phone (using 3g, so not my home network), the css is not rendered at all.

Can you explain this strange behavior?


Solution

  • This has got to be that some of the stylesheets are not getting delivered when you view over the LAN.

    When you look in Firebug NET tab (or similar) can you verify that all the stylesheets are being included and loaded (no 404s).

    Also, if you look at the element that should have a font-face (for example) set, and check its styles, what is being applied? Is it that the styles are not there, or are they there and not being applied as you expect? (I am thinking the former).


    Everything is working now, except for one thing. My phone only shows the right font for only the capitols. Any ideas on this?

    If you look at the text with incorrect font in DOM inspector, does it show that the style is being applied?