Getting a font to display correctly in Weebly

I want my website to use Friz Quadrata, and I've read up on how to add custom fonts to Weebly's themes' CSS, but it doesn't seem to be working.

It said to add the font name to the bolded part:

body {
margin: 0 auto;
padding: 0;
font: 76% Friz Quadrata,Verdana,Tahoma,Arial,sans-serif;
background: #f4f4f4 url(bg.gif) top center repeat-y;
}

#wrap {
background: #ffffff;
color: #303030;
margin: 0 auto;
width: 760px;
}

#header {
clear: both;
padding: 0;
padding: 20px 0 0 0;
height: 45px;
}

#header h1 {
margin: 0 0 10px 0;
float: left;
line-height:1.5;
}

#header p {
width: 500px;
float: right;
text-align: center;
color: #a0a0a0;
margin: 0 0 10px 0;
font-size: 0.8em;
line-height:1.5;
}

#frontphoto {
margin: 0 0 10px 0;
border: 0;
width: 760px;
height: 175px;
background:#ffffff url(%%HEADERIMG%%) top left no-repeat;
}

#avmenu {
clear: left;
float: left;
width: 150px;
margin: 0 0 10px 0;
padding: 0;
font-size: 0.9em;
}

#avmenu ul {
list-style: none;
width: 150px;
margin: 0 0 20px 0;
padding: 0;
font-size: 1.1em;
}

#avmenu li {
margin-bottom: 4px;
}

#avmenu li a {
font-weight: bold;
text-decoration: none;
color: #505050;
display: block;
padding: 6px 1px 6px 10px;
background: #f4f4f4;
border-left: 4px solid #cccccc;
}

#avmenu li a:hover {
background: #eaeaea;
color: #286ea0;
border-left: 4px solid #286ea0;
}
#active a:link {
background: #eaeaea;
color: #286ea0;
border-left: 4px solid #286ea0;
}
#active a:hover {
background: #eaeaea;
color: #286ea0;
border-left: 4px solid #286ea0;
}
#active a:visited {
background: #eaeaea;
color: #286ea0;
border-left: 4px solid #286ea0;
}

.announce {
margin: 10px 0 10px 0;
padding: 10px;
width: 130px;
color: #505050;
background-color: #f4f4f4;
line-height:1.5;
}

#extras {
float: right;
width: 100px;
margin: 0 0 10px 0;
padding: 0;
font-size: 0.9em;
line-height:1.5;
}

#extras p {
margin: 0 0 1.5em 0;
}

#content {
margin: 0 0 20px 0px;
border-left: 1px solid #f0f0f0;
border-right: 1px solid #f0f0f0;
padding: 0 10px 0 10px;
line-height:1.5;
text-align: justify;
min-height:400px;
height:auto !important;
height:400px;
width: 578px;
float: right;
overflow-x:visible !important;
overflow-x:hidden;
}

#content h2 {
font-size: 1.5em;
margin: 0 0 0.5em 0;
}

#content img {
padding: 1px;
display:inline;
border: 4px solid #f0f0f0;
}

h3 {
font-size: 1.3em;
margin: 0 0 10px 0;
}

a {
text-decoration: none;
color: #286ea0;
}

a:hover {
text-decoration: underline;
color: #286ea0;
}

a img {
border: 0;
}

#footer {
clear: both;
margin: 0 auto;
padding: 10px 0 20px 0;
border-top: 4px solid #f0f0f0;
width: 760px;
text-align: center;
color: #808080;
font-size: 0.9em;
}

#footer a {
color: #808080;
text-decoration: none;
}

#footer a:hover {
text-decoration: underline;
}

.left {
margin: 10px 10px 5px 0;
float: left;
}

.right {
margin: 10px 0 5px 10px;
float: right;
}

.textright {
text-align: right;
}

.center {
text-align: center;
}

.small {
font-size: 0.8em;
}

.bold {
font-weight: bold;
}

.hide {
display: none;
}


/****************************** flyout menus ******************************/

#weebly-menus .weebly-menu-wrap {
z-index: 5000;
}

#weebly-menus .weebly-menu {
padding: 0;
margin: 0;
list-style: none;
}

#weebly-menus .weebly-menu li {
float: left;
clear: left;
width: 170px;
text-align: left;
}

#weebly-menus .weebly-menu li a {
position: relative;
display: block;
width: 100%;
background: #286ea0;
border-right: 1px solid #286ea0;
border-left: 1px solid #286ea0;
border-bottom: 1px solid #286ea0;
text-decoration: none;
font-family:Verdana,Tahoma,Arial,sans-serif;
font-size: 11px;
font-weight: bold;
line-height:1;
padding:3px;
color: #ccc;
}

#weebly-menus .weebly-menu li a:hover {
border-right: 1px solid #3680b6;
border-left: 1px solid #3680b6;
border-bottom: 1px solid #3680b6;
background: #3680b6;
}

#weebly-menus span.weebly-menu-title {
display: block;
padding: 5px 10px;
}

#weebly-menus span.weebly-menu-more {
background: transparent url(http://images.weebly.com/weebly/images/submenu_arrow.gif) no-repeat center top;
display: block;
position: absolute;
right: 5px;
top: 0;
font-family: Courier;
height: 28px;
line-height: 28px;
padding:1px 0 3px 0;
}

That doesn't seem to be working, though. What am I doing wrong? Please keep in mind that I'm very new at this stuff, so go easy on me. :D

Friz Quadrata is not a native font. It did not come with my windows xp op system. If you want to use it, you must install it and that does not work in all browsers.

Ok, how do I do that? I understand how I make my browser display it, but I want it to display on my website.

http://www.ironpaper.com/webintel/articles/html-5-font-face-font-format-usage/

or google

html 5 @ face-font

Ok, so I went ahead and generated the code for Friz Quadrata:

/* Generated by Font Squirrel (http://www.fontsquirrel.com) on April 17, 2011 */



@font-face {
font-family: 'FrizQuadrataTTRegular';
src: url('frizquadratatt-webfont.eot');
src: url('frizquadratatt-webfont.eot?#iefix') format('eot'),
url('frizquadratatt-webfont.woff') format('woff'),
url('frizquadratatt-webfont.ttf') format('truetype'),
url('frizquadratatt-webfont.svg#webfontat9YVqII') format('svg');
font-weight: normal;
font-style: normal;

}

Where should I add it to the above CSS?

you can put it anywhere in the css

Ok, here's the CSS. What am I doing wrong?

/* andreas01 - an open source xhtml/css website layout by Andreas Viklund (http://andreasviklund.com). Made for OSWD.org, free to use as-is for any purpose as long as the proper credits are given for the original design work. For design assistance and support, contact me through my website or through http://oswd.org/email.phtml?user=Andreas

Version: 1.0
(July 25, 2005)

Screen layout: */

body {
margin: 0 auto;
padding: 0;
font: 76% Friz Quadrata,Verdana,Tahoma,Arial,sans-serif;
background: #f4f4f4 url(bg.gif) top center repeat-y;
}

/* Generated by Font Squirrel (http://www.fontsquirrel.com) on April 17, 2011 */
@font-face {
font-family: 'FrizQuadrataTTRegular';
src: url('frizquadratatt-webfont.eot');
src: url('frizquadratatt-webfont.eot?#iefix') format('eot'),
url('frizquadratatt-webfont.woff') format('woff'),
url('frizquadratatt-webfont.ttf') format('truetype'),
url('frizquadratatt-webfont.svg#webfontat9YVqII') format('svg');
font-weight: normal;
font-style: normal;
}

#wrap {
background: #ffffff;
color: #303030;
margin: 0 auto;
width: 760px;
}

#header {
clear: both;
padding: 0;
padding: 20px 0 0 0;
height: 45px;
}

#header h1 {
margin: 0 0 10px 0;
float: left;
line-height:1.5;
}

#header p {
width: 500px;
float: right;
text-align: center;
color: #a0a0a0;
margin: 0 0 10px 0;
font-size: 0.8em;
line-height:1.5;
}

#frontphoto {
margin: 0 0 10px 0;
border: 0;
width: 760px;
height: 175px;
background:#ffffff url(%%HEADERIMG%%) top left no-repeat;
}

#avmenu {
clear: left;
float: left;
width: 150px;
margin: 0 0 10px 0;
padding: 0;
font-size: 0.9em;
}

#avmenu ul {
list-style: none;
width: 150px;
margin: 0 0 20px 0;
padding: 0;
font-size: 1.1em;
}

#avmenu li {
margin-bottom: 4px;
}

#avmenu li a {
font-weight: bold;
text-decoration: none;
color: #505050;
display: block;
padding: 6px 1px 6px 10px;
background: #f4f4f4;
border-left: 4px solid #cccccc;
}

#avmenu li a:hover {
background: #eaeaea;
color: #286ea0;
border-left: 4px solid #286ea0;
}
#active a:link {
background: #eaeaea;
color: #286ea0;
border-left: 4px solid #286ea0;
}
#active a:hover {
background: #eaeaea;
color: #286ea0;
border-left: 4px solid #286ea0;
}
#active a:visited {
background: #eaeaea;
color: #286ea0;
border-left: 4px solid #286ea0;
}

.announce {
margin: 10px 0 10px 0;
padding: 10px;
width: 130px;
color: #505050;
background-color: #f4f4f4;
line-height:1.5;
}

#extras {
float: right;
width: 100px;
margin: 0 0 10px 0;
padding: 0;
font-size: 0.9em;
line-height:1.5;
}

#extras p {
margin: 0 0 1.5em 0;
}

#content {
margin: 0 0 20px 0px;
border-left: 1px solid #f0f0f0;
border-right: 1px solid #f0f0f0;
padding: 0 10px 0 10px;
line-height:1.5;
text-align: justify;
min-height:400px;
height:auto !important;
height:400px;
width: 578px;
float: right;
overflow-x:visible !important;
overflow-x:hidden;
}

#content h2 {
font-size: 1.5em;
margin: 0 0 0.5em 0;
}

#content img {
padding: 1px;
display:inline;
border: 4px solid #f0f0f0;
}

h3 {
font-size: 1.3em;
margin: 0 0 10px 0;
}

a {
text-decoration: none;
color: #286ea0;
}

a:hover {
text-decoration: underline;
color: #286ea0;
}

a img {
border: 0;
}

#footer {
clear: both;
margin: 0 auto;
padding: 10px 0 20px 0;
border-top: 4px solid #f0f0f0;
width: 760px;
text-align: center;
color: #808080;
font-size: 0.9em;
}

#footer a {
color: #808080;
text-decoration: none;
}

#footer a:hover {
text-decoration: underline;
}

.left {
margin: 10px 10px 5px 0;
float: left;
}

.right {
margin: 10px 0 5px 10px;
float: right;
}

.textright {
text-align: right;
}

.center {
text-align: center;
}

.small {
font-size: 0.8em;
}

.bold {
font-weight: bold;
}

.hide {
display: none;
}


/****************************** flyout menus ******************************/

#weebly-menus .weebly-menu-wrap {
z-index: 5000;
}

#weebly-menus .weebly-menu {
padding: 0;
margin: 0;
list-style: none;
}

#weebly-menus .weebly-menu li {
float: left;
clear: left;
width: 170px;
text-align: left;
}

#weebly-menus .weebly-menu li a {
position: relative;
display: block;
width: 100%;
background: #286ea0;
border-right: 1px solid #286ea0;
border-left: 1px solid #286ea0;
border-bottom: 1px solid #286ea0;
text-decoration: none;
font-family:Verdana,Tahoma,Arial,sans-serif;
font-size: 11px;
font-weight: bold;
line-height:1;
padding:3px;
color: #ccc;
}

#weebly-menus .weebly-menu li a:hover {
border-right: 1px solid #3680b6;
border-left: 1px solid #3680b6;
border-bottom: 1px solid #3680b6;
background: #3680b6;
}

#weebly-menus span.weebly-menu-title {
display: block;
padding: 5px 10px;
}

#weebly-menus span.weebly-menu-more {
background: transparent url(http://images.weebly.com/weebly/images/submenu_arrow.gif) no-repeat center top;
display: block;
position: absolute;
right: 5px;
top: 0;
font-family: Courier;
height: 28px;
line-height: 28px;
padding:1px 0 3px 0;
}

¿Qué?

Pegasus1935 you must generate these fonts and have them on your server at the url locations. Please re read the html page again.

By convention, all at-rules should be at the top of the document, starting with @charset.

As for your font issue, you must do this:
- Upload the font files to the same directory as the CSS file
- Reference "FrizQuadrataTTRegular" when you wish to use the font.

Something has been on my mind all night. To make down loadable fonts you need to own the fonts or use free fonts. I am sure Friz Quadrata fonts are not free. When you go to buy fonts there are problems with what you can do with them. So ask if you can do what you want to do before buying or look for a free font that is similar.

And Apostropartheid, I knew that. Don't know why i said what i said. Sorry guys.