Struggling with implementing Custom Fonts in my HTML 5 project. Despite following various tutorials online, nothing seems to be working for me.
Currently utilizing the 960 grid system and housing my CUSTOM FONTS CSS within custom.css.
Snippet of my HTML 5 code:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>LOGIN PAGE</title>
<meta name="description" content="Administrator">
<link rel="stylesheet" type="text/css" media="screen" href="style/reset.css" />
<link rel="stylesheet" type="text/css" media="screen" href="style/960_12_col.css" />
<link rel="stylesheet" type="text/css" media="screen" href="style/custom.css" />
</head>
<body>
<div id="main-container" class="container_12">
<h1>HEAD</h1>
<form>
<ul id="main-login" class="push_2">
<li><p >USERNAME</p> <input type="text" name="cai_uname" /></li>
<li><p>PASSWORD</p> <input type="password" name="cai_pass" /></li>
<li><input type="submit" name="cai_login" value="LOGIN" /></li>
</ul>
</form>
</body>
Custom font CSS:
@font-face{
font-family: AzoftSans;
src: url('font/azoft-sans.eot');
src: url('font/azoft-sans.eot?#iefix') format('embedded-opentype'),
url('font/azoft-sans.ttf') format('truetype');
}
body{
background:#666666 url("../images/bg_login_half.jpg") repeat-x;
}
h1{
font:bold 24pt/2 AzoftSans, Tahoma, Arial, Verdana, sans-serif;
text-align: center;
}
Omitting the 960 gridsystem reset and 960_12_col.css. Unsure if this affects my CSS implementation.
Appreciate any guidance.