Member Avatar for 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

  • 6 Contributors
  • 6 Replies
  • 441 Views
  • 4 Years Discussion Span
  • Latest Post Latest Post by Samuccaya

Dani AI

Generated

Short answer: yes — you can host font files on your server and use them with @font-face (as described). A few practical points that are often missing in short examples: supply multiple font formats for broad browser support, place the @font-face rule in your CSS (external file linked in the page head or a <style> block there — not in JavaScript), respect the font’s web-embedding license, and be careful with file paths and server headers.

A compact, modern @font-face example (place it near the top of your stylesheet; paths are relative to the CSS file):

@font-face {
  font-family: 'GeosansWeb';
  src: url('/fonts/GeosansWeb.woff2') format('woff2'),
       url('/fonts/GeosansWeb.woff') format('woff'),
       url('/fonts/GeosansWeb.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

Quick troubleshooting checklist (most common reasons fonts "don’t work"):

  • Path mistakes: URLs in CSS are relative to the CSS file location. Use absolute paths (starting with /) to avoid confusion.
  • Browser formats: serve woff2/woff first, use ttf/otf fallback; add EOT only if you must support very old IE.
  • CORS / headers: fonts served from another domain/subdomain must allow cross-origin requests (add an Access-Control-Allow-Origin header).
  • Server MIME types: ensure the server sends correct MIME types for .woff/.woff2/.ttf.
  • Font internals and names: the font’s internal family name can differ from the filename — quote names with spaces and use the exact family string.
  • Local testing: some browsers block fonts over file://; test via http(s).
  • CSS errors: invalid declarations can be ignored by the parser — for example use letter-spacing: 1px; not 1 (see ’s stylesheet).

Finally, a note on confusion: ’s comment about the “@” being wrong is incorrect — @font-face requires the leading @. For licensing and conversion tools, use only fonts you are allowed to embed.

Recommended Answers

All 6 Replies

Member Avatar for 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;
}
Edited by Varnius because: n/a
Member Avatar for pritaeas

Read this blog-post too.

Member Avatar for 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

Member Avatar for 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; }
Member Avatar for <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

Member Avatar for 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.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.