I have a website and when I first load it up into my browser (after clearing cache), it displays the default arial font instead of my font which is applied via @font-face (in a separate CSS file).
Once I click on any link on my website, it then displays the correct font so it seems like the initial page load is not recognizing the font.
I thought it may have been something to do with the order of stylesheets within the <head> tag so as you can see I’ve put my external @font-face file ABOVE the main CSS stylesheet (to make sure the @font-face declaration has been set for the other stylesheet to apply them to elements) but it doesn’t seem to have helped in the slightest.
Maybe the browser is trying sometimes to find that file in vain before downloading the other webfont files, while in the meantime the normal stylesheet main_styles.css is downloaded simultaneously and directly executed/rendered > on that moment there is no arsenal-regular yet, and the browser has to fall back to the default font.
Is that it?
And which browser(version) is misbehaving?
My Firefox, Chrome, Internet Explorer 7, Opera and Safari on a WinXP desktop have no problems.
Strange; I tested FF 24, Chrome 29 and Chrome 30 on Win7: no problems either.
Do you have indications that other people have the same font problem?
Maybe in some way it’s only a local thing?
I do however see a worse issue where you are resizing the page with a script.
If you close the window then suddenly the page layout changes and the header is mismatched and the content overflows the blue “Need a website” section. What’s worse is that if you then resize the window larger again it stays like that except the nav stays to the left and the content moves to the centre so all is disjointed.
A better approach (in most cases) is to use media queries to adjust content depending on the browser’s width (or have a fluid site that adapts to screen size automatically).
A quick fix would be to add margin:auto to the header.
#header {
[B] margin: auto;[/B]
}
The better fix is to use media queries and then adjust the elements into better positions. Unlike the JS you used the media query doesn’t need a refresh to start working and will work as soon as you open or close the screen.
Jquery isn’t required for responsive design but is needed if you want to create dynamic effects.
Media queries need no JS support and just work in IE9+. IE8 and under don’t understand them but there are polyfills around.
Responsive design doesn’t actually need anything in its simplest form as a line of text in a widthless container will fit any viewport if left unconstrained. The prblem occurs where authors start introducing fixed width elements and a 1200px wide image won;t fit into a 320 px window unless you change or scale it in some way. Responisve design is about building fluidity into the elements that you use and then re-adjusting the layout at sizes where the layout breaks or looks awkward.
The web seems to have moved away from fixed pixel width designs because even though you can adjust them to new widths with media queries you still miss all the devices that are between those widths and these days there are so many devices that you cannot be device specific because it will drive you mad. You want to be device agnostic and just create a layout that fits your browser from 320px to a max-width that you think is appropriate (very wide pages are hard to read). You do this by checking the design as you open and close the window and when something looks wrong then create a media query for that width and adjust the layout so it works better.
It’s a new way of thinking and takes a little bit of work to implement but the results are much better and often think more about content than design.
You won’t need it once you convert it to using media queries etc.
However, as this is your first attempt at a responsive conversion I would suggest you make a local copy of the site and work on it locally so you can experiment rather than upsetting your live site at this stage. It always takes a while to get used to working with media queries and responsive design.
Forget about devices and sizes as that is the route to madness.
Create your page so that to goes from small 320px (or even 240px) up to 1240px (approx).
You create a fluid page to start with (with fluid elements) that can shrink and grow as required. At certain points elements just won’t fit or look awkward and at this point you whip out your media query and change the element to fit better. The point at which you insert your media query depends on the point at which your layout breaks. Just grab the edge of the window and move it in and out and when things look bad - fix them:)
This of course means using a fluid layout approach and not a series of fixed width designs.
If you can’t make a fluid site then you should look at creating breakpoints that suit most common devices but is not an approach I would take unless there was no choice.
