install fonts in website

[jackparsana]

please help me to install fonts in my website.

can i put fontfile in my server and use in webpage.

thanks in advance.

jack

[Varnius]

Upload font file to your server. Then define font using @font-face:

@font-face {
	font-family: yourfont;
	src: url('yourfont.ttf');
}

All done. Now you can apply your font to page elements:

p.custom_font{
	font-family: yourfont;
}

[pritaeas]

Read this blog-post too.

[jackparsana]

Upload font file to your server. Then define font using @font-face:

@font-face {
	font-family: yourfont;
	src: url('yourfont.ttf');
}

All done. Now you can apply your font to page elements:

p.custom_font{
	font-family: yourfont;
}

it works perfectly
thanks a lot

[nabu661]

My font not working in website. Please help me .. this is my code

    @font-face {
    font-family: GeosansLight;
    src: url('GeosansLight.ttf');
    }

/* BASIC RESET */
ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,body,html,p,blockquote,fieldset,input{margin:0; padding:0;}

/* HTML ELEMENTS */
body { background-color:#1b2940; font-family:GeosansLight, Arial, Helvetica, sans-serif; letter-spacing:1; text-transform:lowercase;   }

  /* COMMON CLASSES */
.break { clear:both; }

/* HEADER */
#header { height:650px; }
.headerimg { background-position: center top; background-repeat: no-repeat; width:100%; height:650px; position:absolute; }

/* NAVIGATION */
#nav-outer { height:40px; width:960px;padding-top:11px; position:relative; top:520px; background-image:url("../images/headerbg.png"); }
#navigation { height:100px; width:960px; margin:0 auto; background-image:url("../images/logo.png"); background-position:left center; background-repeat:no-repeat; }
/* SEARCH */
#search { background-color:#051733; float:right; width:220px; padding:10px; }
#searchtxt { padding:3px; width:150px; }
#searchbtn { border:1px solid #eee !important; background-color:#CD2B3A; color:#eee; padding:3px; margin-left:5px; }

/* MENU 
#menu { position:relative;top:20px; left:10px }
#menu ul { list-style:none; }
#menu ul li { display:inline; font-variant:small-caps; font-size:12px; }
#menu ul li a { color:#000000; text-decoration:none; font-weight:bold; padding-right:20px; }
#menu ul li a:hover { text-decoration:underline; }*/

/* HEADER TEXT */
#headertxt { width:960px; margin:0 auto; clear:both; position:relative; top:100px; }
#firstline { background-image:; color:#000000; font-size:40px; padding:4px 13px 7px; float:left; display:block;text-shadow: 0px 1px 1px #000; }
#secondline { background-image:; color:#000000; text-decoration:none; font-size:60px; padding:0 13px 10px; float:left; display:block; clear:both; }
#secondline:hover { text-decoration:underline; color:#; }

.pictured { background-color:#FFFFFF; color:#333333; font-weight:bold;font-size:12px; padding:9px 16px; text-transform:uppercase; float:left; display:block; clear:both; margin-top:10px; }
.pictured a { font-size:16px; font-style:italic; letter-spacing:0; text-transform:none; color:#000000; text-decoration:none; }
.pictured a:hover { text-decoration:underline; }

/* CONTROLS */
.btn { height:32px; width:32px; float:left; cursor:pointer; }
#back { background-image:url("../images/btn_back.png"); }
#next { background-image:url("../images/btn_next.png"); }
#control { background-image:url("../images/btn_pause.png"); }

/* HEADER HAVIGATION */
#headernav-outer { position:relative; top:430px; margin:0 auto; width:960px; }
#headernav { padding-left:864px; }

/* CONTENT */
#content { color:#575757; background-color:#eee; }
#content p { padding:10px 20px; font-size:16px; width:960px; margin:0 auto; }

#content p a { text-decoration:none; color:#CD2B3A; }
#content p a:hover { text-decoration:underline; color:#7F000C; }

[<M/>]

I don't have much time to go over what you did but i see that on line 1 you have an @ symbol... Not sure why you did that

[Samuccaya]

Do I put @font-face {
font-family: yourfont;
src: url('yourfont.ttf');
} in a CSS script in the head section of my webpage, or in a separate file? Is is part of a java script? I don't know where to put it.