Help. Unable to get Custom font to show on website

Hi all,

Inspite of research on how to embed fonts with CSS and adding the relevant @fontface call, I cant get to show the embedded font on the site. Of course, the font files have been uploaded to the server.

Here’s the webpage I’m talking about Registration form for Audi quattro cup final

The attached stylesheet where I have added the call for the custom fonts is style2.css. Can somebody guide me on where I’m going wrong and correct me please.

Thanks a ton!

What elements do you want to show in that font? There aren’t any font declarations in your stylesheet.

BTW, I think you should really clean up your markup…

As Hueij says, you haven’t specified that font on any element. For example, if you wanted your <p> to use that font, you need to say something like:

p {font-family: AudiTypeExtendedNormal, san-serif;}

(I don’t know if it’s sans-serif or serif, BTW.)

If you want it as the default font for all elements, then do this:

body {font-family: AudiTypeExtendedNormal, san-serif;}

Calling @font-face only gets you half way, in making the browser aware that there’s a font available for use.

Hey thanks a ton I used the second line as I wanted it throughout the page and it worked! Cheers :slight_smile:

Thanks for your tip. I’m still a bit of a noob as far as markups are concerned. Know decent HTML and beginner level CSS, and absolutely no Javascript (I’m more of a wordpress person…where you can get away with these limitations). If you can point out how exactly I can clean up my markup it would be great, otherwise no problem as long as it works!

First stop is to use the w3c validator to spot your 40 errors. You can learn a lot by trying to fix the errors as it highlights all the things that need fixing as well as any silly typos.

You have made many similar errors in your list structure like this:

Errors marked in bold.

        <ul class=mainForm id="mainForm_1">
[B]        <p>&nbsp;</p>
            <h2 align="center">REGISTRATION FORM</h2>
            <h3 align="center">Venue: Jumeirah Golf Estates (Earth Course), Dubai&nbsp; &nbsp;&nbsp; &nbsp; <br>
                Date : September 22-25, 2011</h3>
  [B]      </br>
        <li class="mainForm" id="fieldBox_1">

Nothing can go in the no-mans-land between a closing list tag and the next opening one. Everything in a list must be between the opening list tag and the closing list tag and nothing can be between the opening ul and the first opening list tag either.

Remove those elements marked in bold above.

Never use empty elements to make space and never use 2 breaks in a row as some browsers ignore the second break anyway. Breaks should only be used to indicate an end of line in a semantic way and not to make space.

You can make space by simply using margins or padding on existing elements without harming the mark-up.

I’m not keen on the everything is a list method you are using although I know that some people do recommend them but in the end you up with a page full of lists and extra code where none is needed.

Lists of similar items and menus/navigation are fine for lists but I don’t see form controls as a list unless its for a whole list of check boxes or radio buttons. Otherwise its not really a list but a collection of controls and there are better ways to style them than using a list all the time.

The doctype you are using will put all versions of IE into quirks mode and make them behave much like IE5 and you will lose all the enhancements of the newer IE versions. In qirks mode IE uses the broken box model, forgets how to use auto margins for centering, doesn’t understand many selectors, doesn’t understand :hover on anything but anchors and the list goes on…

Use a full doctyype with uri such as this one:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "">

But you should really be aiming for strict doctypes these days.


Hope that gives you a start :slight_smile: