CODEWITHSUNDEEP
cssfonts
Tabrez
Tabrez

Reputation: 3466

CSS working differently when the site is access via www and directly via @

I am very confused by an issue I am seeing on my production site.

When I access the site via "www", everything looks like expected and matches my local development environment. The css is spot-on.

But if I access the same site with just the domain name the fonts kind of become larger and the site becomes ugly. Has anyone experienced a similar problem?

Maybe I am missing something as 100 things are flying around for me right now.

The urls in question:

http://www.connect4fitness.com
http://connect4fitness.com

And, yes the DNS entries are correct. Both urls should be serving the same pages!

Upvotes: 0

Views: 60

Answers (2)

Ben D
Ben D

Reputation: 14489

I'm guessing you're just viewing at the wrong zoom level. What browser are you using? In the version where the fonts are large, make sure you're veiwing at 100% zoom level (generally this is done by hitting Ctrl+0 (that's a zero) or zoom in and out with Ctrl+(either plus or minus +/-). Most modern browsers remember your last zoom level for a specific site, and do differentiate between sub-domains, so you you zoomed in at some point it will remember it only on the http://connect4fitness.com.

Upvotes: 3

rjb
rjb

Reputation: 9116

If you're using @font-face rules in your CSS, the path(s) to the fonts have to match the domain from which they're requested — this is referred so as the same origin policy.

For example, if you're viewing this page:

http://example.com/about

and the fonts are being served via CSS from:

http://www.example.com/css/screen.css

You'll encounter the same origin policy and the browser will not download the font files (since the fonts specified in the CSS are being served from a different domain. Remember, sub-domains such as www are technically considered a separate domain).

To easiest way to fix the problem is to link to your fonts in your CSS using relative (../) or absolute paths (/), and avoid using your site's FQDN if at all possible..

Good (Relative):

@font-face {
    font-family: 'MyWebFont';
    src: url('../fonts/webfont.eot');
    src: url('../fonts/webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/webfont.woff') format('woff'),
         url('../fonts/webfont.ttf') format('truetype'),
         url('../fonts/webfont.svg#svgFontName') format('svg');
}

Best (Absolute):

@font-face {
    font-family: 'MyWebFont';
    src: url('/fonts/webfont.eot');
    src: url('/fonts/webfont.eot?#iefix') format('embedded-opentype'),
         url('/fonts/webfont.woff') format('woff'),
         url('/fonts/webfont.ttf') format('truetype'),
         url('/fonts/webfont.svg#svgFontName') format('svg');
}

Bad (FQDN):

@font-face {
    font-family: 'MyWebFont';
    src: url('http://example.com/fonts/webfont.eot');
    src: url('http://example.com/fonts/webfont.eot?#iefix') format('embedded-opentype'),
         url('http://example.com/fonts/webfont.woff') format('woff'),
         url('http://example.com/fonts/webfont.ttf') format('truetype'),
         url('http://example.com/fonts/webfont.svg#svgFontName') format('svg');
}

Upvotes: 0

Related Questions