How To Embedded Font in css ( custom font )
In website font is most issues to design the site so, here I am show how to embedded you custom font output show in websites.
In css font embed to use @font-face attribute Given Below Example :
Here I am use php script you can select html file also but some time it problem to embedded than you use html 5 format to html file.
My font is store in font directory and my css file store in css directory.
Now Html File is Below :
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>krButani</title>
<link rel="stylesheet" type="text/css" href="css/style.css"/>
</head>
<body>
<div class="demo-header">
<div class="title" align="center">My Text Is Here</div>
</div>
</body>
</html>
Css File is Below :
@font-face {
/* font-family specify name of font that can use is css file */
font-family: 'testMY';
/* here you can specify font attribute than it apply automatically when you apply this font */
font-style: normal;
font-weight: 400;
/* url is given that way and format must give */
src: url("../font/Barbarian NS.ttf");
}
*
{
margin:0px;
padding:0px;
text-decoration:none;
}
.demo-header
{
position:fixed;
top:0px;
left:0px;
right:0px;
background:#4D7531;
color:#FEFCFA;
box-shadow:0px 0px 3px 2px #999;
}
.demo-header .title
{
font-size:40pt;
letter-spacing:1px;
margin:10px;
font-family: testMY, Verdana, Arial, Helvetica, sans-serif;
text-shadow: 0px 0px 2px #999999;
}
So, This way to Embed font. If you can have problem than give commet.
In css font embed to use @font-face attribute Given Below Example :
Here I am use php script you can select html file also but some time it problem to embedded than you use html 5 format to html file.
My font is store in font directory and my css file store in css directory.
Now Html File is Below :
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>krButani</title>
<link rel="stylesheet" type="text/css" href="css/style.css"/>
</head>
<body>
<div class="demo-header">
<div class="title" align="center">My Text Is Here</div>
</div>
</body>
</html>
Css File is Below :
@font-face {
/* font-family specify name of font that can use is css file */
font-family: 'testMY';
/* here you can specify font attribute than it apply automatically when you apply this font */
font-style: normal;
font-weight: 400;
/* url is given that way and format must give */
src: url("../font/Barbarian NS.ttf");
}
*
{
margin:0px;
padding:0px;
text-decoration:none;
}
.demo-header
{
position:fixed;
top:0px;
left:0px;
right:0px;
background:#4D7531;
color:#FEFCFA;
box-shadow:0px 0px 3px 2px #999;
}
.demo-header .title
{
font-size:40pt;
letter-spacing:1px;
margin:10px;
font-family: testMY, Verdana, Arial, Helvetica, sans-serif;
text-shadow: 0px 0px 2px #999999;
}
So, This way to Embed font. If you can have problem than give commet.
Comments
Post a Comment