Online Portfolio and Resource Blog

Here is fast and effective way of embedding fonts into your webpage without having to use graphical images.

First we must declare the font:

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

Now we are able to call it using “font-family”

h1 { font-family: amputa, sans-serif; }

View Results

Download the font used in this example:
Amputa Bangiz Standard TTF

In order to vertically center a block level element, we need to give it an absolute position. This will detach the element from its surroundings and will allow us to give it a specific position related to the browser window.

By offsetting the div by 50% from the top and left, we are positioning upper-left corner to the center of the page. The last step is to move the div to the left and top by using half of its dimensions in a negative margin.

For example, if the width of the element is 960px, then set the left margin to -480px. If the height of the element is 600px, then set the top margin to -300px.

HTML Structure

<div id="main">
  <div id="header"> Header </div>
  <div id="content"> content </div>
</div>

CSS

body {
	background: url("bg.gif");
	font-family: Arial, Verdana, sans-serif;
}
#main {
	width: 960px;
	height: 400px;
	background: #f1f1f1;
	text-align: left;
	position: absolute;
	top: 50%;
	left: 50%;
	margin: -200px 0 0 -480px;
}
#header {
	background: #000;
	padding: 10px;
	color: #fff;
}
#content {
	padding: 10px;
}

Click here for the final result

Related Article: CSS: Center a Div Using Absolute Positioning