Skip to main content

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.
Post a Comment

Popular posts from this blog

My new Jquery Plugin name is krDailog

This is my new jquery plugin i hope this is use full to you if you require this plugin than contact me

 /*
    krDailog Version 1.0
    Author: krButani
    email: butanikartik1108@gmail.com
*/


Require to use this function
    - bootstrap.css new version
    - bootstrap.js new version
    - jquery.js new version
    - jquery-ui.js new version
    - glyphicons font by bootstrap

# you can use new version of all and also use min file also

# include file first this way

    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="css/krDailog.css">
    <script type="text/javascript" src="js/jquery.min.js"></script>
    <script type="text/javascript" src="js/jquery-ui.min.js"></script>
    <script type="text/javascript" src="js/bootstrap.min.js"></script>
    <s…

Intent demo pass with text demo in Android

First Create Two acitvity layout file name firstscreen.xml second_screen.xml java filename FirstScreen.java SecondScreen.javafirstscreen.xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/firstscreen"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
tools:context="com.example.krbutani.intentpasswithdatademo.Firstscreen">

<Button
android:text="Goto Second"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignPare…