Website main apna font embedd karna.Complete tutorial with settings for webmasters

**AtifRaza** · 20th July 2011, 09:04 PM

As Salam O Alaikum

AAE section main aik user ne question kya tha ke website main apnay font ko kesay embedd krwaya gata hai. Main ne soocha aik complete tutorial write kr dun jis se dosray users ko bhi information mil sakay.

Humein pata hai ke website main sirf unhi fonts ko use kr saktay hain jo ke available hotay hain mager agr ap ke pass koe font file ho like .ttf aur ap chahain ke webpage pr font wohi aay jo is file main hai to aesa CSS ke through possible hai.

Apni practice ke leye ap yeh steps follow krain.

STEP # 1

- Aik folder banain, for example 'cssfonts' name ka folder
- Apnay .ttf font file ko isi folder main copy krain, for example meray font ka name hai 'classic.ttf'
- Is folder main aik css file banaein, 'font.css'
- 'font.css' ko open krain aur yeh coding is main pastr kr dein

Code:

@font-face {
	font-family: MyFonT;
	src: local("classic.ttf"),url('classic.ttf');
}

- Is ko size aur color aur dosray attributes ko control krnay ke leye hum 'font.css' main mazeed coding krtay hain

Code:

#label {font-family: MyFont; color: red; font-size: 40px}
@font-face {
	font-family: MyFonT;
	src: local("classic.ttf"),url('classic.ttf');
}

- Yeh aik CSS file hai isi leye humein CSS attributes denay hain. Ap color hexa code main bhi define kr saktay hain aur font size ko pixel main define krna hai.
- #LABEL ko hum ne is leye define krwaya css file main kyu ke hum HTML main [ID=LABEL] se apna font use krain gay aur humein asaani ho gi.
- Yeh CSS technique Internet Explorer main nahe chal sakti, kyu ke Internet Explorer browser .TTF fonts ko support nahe krta yeh .EOT font file ko support krta hai. Baki browsers main hamara font nazar aay ga magr IE main nahe. Internet Explorer main bhi apnay font ko compatible krnay ke leye humein mazeed CSS file main coding krna ho gi aur .TTF font ko .EOT file main convert krna parey ga.

STEP # 2
- TTF font file ko EOT format main convert krnay ke bohat sarey tools available hain, ap ki asaani ke leye main ONLINE Converting ke links share krta hun.

Link # 1 (Recommended)
Link # 2

Note: binaries ki problem ki waja se aesa ho gata hai ke akser .TTF file .EOT main theek se convert nahe hoti. Is leye agr .EOT main conversion theek se nahe hoti to converter tool dosra use krain.

- EOT main convert krnay ke baad is ko usi folder main rakhain 'cssfonts' folder main. Ab 'cssfonts' folder main 2 fonts files ho gein 'classic.ttf' aur 'classic.eot'
- 'font.css' file main mazeed coding add krain

Code:

#label {font-family: MyFont; color: red; font-size: 40px}
@font-face {
	font-family: MyFonT;
	src: url("classic.eot");
	src: local("classic.ttf"),url('classic.ttf');
}

STEP # 3
- Ab 'cssfonts' folder main aik html file banain, like 'index.html'
- Is html file ke HEAD tag main apni css file ko include krwain aur ID=LABEL use krain apnay font ko display krwanay ke leye. Example

Code:

<html>
<head>
<link rel="stylesheet" type="text/css" href="font.css" media="all">
</head>
<body>
	<div id="label">I T D U N Y A . C O M </div>
	<p id="label"> YOU CAN SEE THIS FONT IN EVERY BROWSER </p>
	<p> I can also use default font </p>
</body>
</html>

Step # 4
- EnjoY...

Wesay yeh itna lengthy tutorial nahe tha magr main ne detail main sirf isi leye describe kya ke aesay users jo ke BEGGINER level ke hain un ki bhi learning ho. I have also attached outputs of this work in firefox and Internet explorer. Also I have attached full project. You can download & learn

Remember me in your prays

Regards,
Atif Raza