Font issue

Good afternoon all,

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.

Here is my code:

    <title>TSPV-Websites - <?php print($title); ?></title>
        <base href="">
        <link rel="stylesheet" href="css/fonts.css" />
	<link rel="stylesheet" href="css/main_styles.css" />
    <link rel="icon" type="image/png" href="images/favicon.ico" />
    <script src="//"></script>

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.

Any thoughts on why?

Anyone had this problem before?

Thank you in advance for your time.

Kind regards,


Please provide the path to your font file and the related CSS lines that show you accessing that file.

Good evening,

There’s nothing wrong with the filepath because after I click any link on the page and it loads again, the font gets applied but here is there CSS:


@font-face {
    font-family: 'arsenalregular';
    src: url('arsenal-regular-webfont.eot');
    src: url('../fonts/arsenal-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/arsenal-regular-webfont.woff') format('woff'),
         url('../fonts/arsenal-regular-webfont.ttf') format('truetype'),
         url('../fonts/arsenal-regular-webfont.svg#arsenalregular') format('svg');
    font-weight: normal;
    font-style: normal;



html, body
      background: #E3E3E3;
      margin: 0px;
      font-family: 'arsenalregular';
      letter-spacing: 1px;
      line-height: 20px;

Thanks for your reply.

Kind regards,


The first font src in your fonts.css is directing to [U][/U], a 404 file; the file is in the fonts-directory.

  • 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.

Good morning,

Thank you for the reply.

Ah yes I see my error now, can’t believe I missed that one.

I’ve only tried in FF 24 and Chrome 29 on a Win8.

I’ll edit the first src and see if that helps.

Edit: Nope, doesn’t seem to rectify the problem.

Kind regards,


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?

Good morning Francky,

No indications as such, just something I noticed when clearing cache.

May well be a local thing as both of you have now said it doesn’t happen for you so seems to me I am the only one.

If that’s the case I suppose it’s not even an issue, just wanted to make sure it wasn’t happening to new users coming to the site.

Thanks for the reply.




I don’t see the font issue either :slight_smile:

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).

Good afternoon,

I’ve been meaning to sink my teeth into media queries for a while as I recently read something about changing elements on browser resize.

Any reliable sources to learn from?

I’ve noticed what you mentioned above myself. Would a correct fix be to put all the content within a <div> to prevent the header going to the left?

Kind regards,


This should keep you busy for a while.

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.

Good afternoon,

I’ll crack on with that tonight when I get home.

Is responsive design produced using media queries, jquery or both?

Kind regards,


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.

Good evening,

Thanks very much for the links, just going through them now and finding it very interesting reading.

Should I completely erase the jquery code for resizing the elements then? Going to try and start converting this site to responsive.

Kind regards,


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.

Good afternoon,

I started doing it last night and it’s looking a lot better.

What resolutions are the ‘standard’ ones to cater for? I noticed in one of those links you gave me they check for screen sizes of 1000 and 540 pixels.

Which others should I cater for?

Kind regards,


All of them :slight_smile:


None of them!

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.

Something like this.

Originally Posted by c0dingL!fe:
Good afternoon,
Which others should I cater for?

Originally Posted by Paul O’B:
All of them :slight_smile:
None of them!

A fairy tale about the “All of them”: [U]The Graphical Designer and the CSS Zen Guru[/U] (from oct. 2006, but with all new devices still actual!)

Very good :slight_smile: