How To Add Custom Font in Website

How To Add Custom Font in Website

Some time we need to attach new Font in Website. Font style is very important to develop a site. Especially different language website need attach font. To attach font in your web site you should do some task like below

  • Select a font and keep in the same folder where you keep your index.html and style.css files.
  • We will add some code in style.css file to active the font.

However open your style sheet with a text editor or Dreamweaver software and type the blows code at top of the style sheet.

/* CSS Document */
@font-face {
font-family: 'BAUHS93';
src: url('BAUHS93.ttf');
}
h1 { font-family:bauhs93;}

Here,

font-family: 'BAUHS93';

Is your added font name and

src: url('BAUHS93.ttf');

Is your font location

Now open your index.html file and type the bellows code and see the result with a web browser you will see the font is successfully added.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Add new font</title>
<link rel="stylesheet" type="text/css" href="styles.css" />
</head>
<body>
<h1>Tutorial-house</h1>
</body>
</html> 

Tags: Cascading Style Sheets, css, font, html, Style Sheets, Typeface, adding fonts to web pages, add custom font to website, add font to website css

Masum Billah has written 326 articles

Hi I am Md. Masum Billah Contributor of this website. I always like to share various things with other. In this website I am sharing web design related tips and tricks, necessary web development tools, source codes for beginner and advance web developer. You may join with us to help other who want to learn web design and development. Thank you for stay with.

Recommended Articles

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>