Custom fonts

Hello,
I'm trying to use custom fonts with @font-face but cannot seem to get them to work. I can see them being downloaded on the web page but no luck. Here is what I have in .css:

@font-face
{
    font-family: ChalkDust;
   src: url(http://www.bbdsolutions.net/fonts/chalkdust.ttf);
}

@font-face
{
    font-family: Copperplate Gothic Light;
   src: url(http://www.bbdsolutions.net/fonts/COPRGTL.ttf)
}
@font-face
{
    font-family: Copperplate Gothic Bold;
   src: url(http://www.bbdsolutions.net/fonts/COPRGTB.ttf)
}
.pageHeader
{
    font-family: ChalkDust, Copperplate Gothic Light, Copperplate Gothic Bold;
    font-size: 1.8em;
    padding: 3px 0 10px 2px;
    color: #463E3F;
    font-weight: bold;
}

Here is my code-behind HTML:


<head runat="server">
    <link rel="stylesheet" type="text/css" href="Main.css" />

    <title></title>
    <asp:ContentPlaceHolder id="head" runat="server">
    </asp:ContentPlaceHolder>
    <style type="text/css">
        .style7
        {
            width: 594px;
            }
        .style8
        {
            height: 18px;
        }
        .style9
        {
            width: 594px;
            height: 60px;
        }
    </style>
    </head>



<table style="width: 100%; color: #00FF00; background-color: #000000; font-family: ChalkDust; height: 100px; border:0;"
            align="center">
            <tr>
     
                <td valign="top" align="center" class="style7"
                    style="border-style: none; border-width: 0px; background-image: url('http://www.bbdsolutions.net/Art/lead-214.jpg')" >
                   
                    <asp:Label ID="Label2" runat="server" Font-Names="Copperplate Gothic Light"
                        Font-Size="Small" ForeColor="#666666"
                        Text="Off the Grid Technology, LLC"></asp:Label>
               
                   
                    <br />
                    <asp:Label ID="Label3" runat="server" Font-Size="XX-Large" Text="Tree Squat'R"></asp:Label>
               
                   
                </td>
               
            </tr>
</table>

the .ttf files are there.
Any help would be great - thx
LVL 5
thenrichAsked:
Who is Participating?

Improve company productivity with a Business Account.Sign Up

x
 
jagssiduralaConnect With a Mentor Commented:
instead of placing @fontface class in separate file kept in the HTML page header section ........
0
 
jagssiduralaCommented:
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.