How To Add Custom Font to Website?

Add Tool

Add Custom Font to Website

Add Custom Font to Website

Some time we need to add custom font to 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;}


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" "">
<html xmlns="">
<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" />
<h1>Add Custom Font to Website</h1>

Tags: how to add custom fonts to website, add custom font to website, how to use custom fonts in html, add ttf font to website, how to use custom fonts in html

About Masum Billah

Add Custom Font to Website 1stWebSuite website seo tool is a free website ranking tool site provides a lot of on page and off page seo useful tools for you. On this site, we have a large number of website ranking tools


Discuss about: How To Add Custom Font to Website?