adding a custom font to VS 2010 @fontface

Started a new asp.net website (razor v2) website in VS2010 (just as a test template to add a custom font)

Added the font 'Gothic.TTd' as an 'existing item' to the project level. Then in 'site.css' I added

@font-face
{
    font-family: "Century Gothic";
    src: url('GOTHIC.TTF'),
}

Then added this font family to the 'body' of site.css to see what it looks like on the home page:

body
{
    background-color: #fff;
    border-top: solid 10px #000;
    color: #333;
    font-size: .85em;
    font-family: "Century Gothic", Segoe UI, Verdana, Helvetica, Sans-Serif;
    margin: 0;
    padding: 0;
}

What else am I missing, how do i generate the css required.? I am working from the following tutorials :

http://markchouanard.com/post/25542393378/using-web-fonts-in-your-asp-net-mvc-application http://www.codeproject.com/Tips/605568/Using-font-face-to-use-custom-fonts-in-web-pages http://weblogs.asp.net/sreejukg/archive/2012/05/23/using-custom-fonts-in-your-web-pages.aspx

Can anyone suggest what I can do now? thanks for any replies

UPDATE I have added

<script type="text/javascript" src="GOTHIC.TTF"></script>

to the _SiteLayout.cshtml file...any other ideas welcome?

Is it necessary to have all the URLS (example in @font-face with embedded font does not work ) I only have the .TTF extesions:

GOTHIC.TTF
GOTHICB.TTF
GOTHICBI.TTF
GOTHICI.TTF

Solution

Replace the comma with a semi-colon, and remove the empty space in the font-family name.

Like this:

@font-face
{
font-family: "CenturyGothic";
src: url('GOTHIC.TTF');
}

body
{
background-color: #fff;
border-top: solid 10px #000;
color: #333;
font-size: .85em;
font-family: "CenturyGothic", Segoe UI, Verdana, Helvetica, Sans-Serif;
margin: 0;
padding: 0;
}

Adding the other urls will let you support more browsers. The .ttf is enough for it to work in Google Chrome.

UPDATE

Please try with this in a "standalone" .html file, as a sort of template (it worked for me):

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style>
@font-face
{
font-family: "Century";
src: url('GOTHIC.TTF');
}
body {
background-color: #fff;
border-top: solid 10px #000;
color: #333;
font-size: .85em;
font-family: "Century", Segoe UI, Verdana, Helvetica, Sans-Serif;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<h1>Hello World</h1>
</body>
</html>

If this doesn't work, maybe you should try with another .ttf. You can find one here: http://www.1001freefonts.com/snacker_comic.font