বিদ্রঃ এ লেখা পড়ার আগে আপনাকে CSS Font Family সম্পর্কে জানতে হবে। আমি ধরে নিচ্ছি আপনি সিএসএস ফন্ট ফ্যামিলি সম্পর্কে জানেন।
Font Face সিএসএস এর দারুন একটা ফিচার। আপনার একটা ফন্ট পছন্দ হয়েছে আপনি তা ব্যবহার করতে চাচ্ছেন, তাহলে কি করবেন? হ্যা তার জন্যই ফন্টফেইস।
ফন্টফেইস সিএসএস এর মধ্যে লিখতে হয়। এবং নিচের মত করে লিখতে হয়ঃ
@font-face
{
font-family: FontFace;
src: url('MyFavoriteFont.ttf')
,url('MyFavoriteFont.eot'); /* For IE */
}
font-family: FontFace; দিয়ে আপনার ফন্ট ফ্যামিলির নাম দিতে পারেন। FontFace এর পরিবর্তে আপনি যেকোন নাম দিতে পারেন। এবং পরবর্তিতে সিএসএস ফন্ট ফ্যামিলি যেভাবে ব্যবহার করে সে ভাবে ব্যবহার করতে পারেনঃ font-family:FontFace;
src: url(‘MyFavoriteFont.ttf’) দিয়ে আপনার ফন্ট এর url যুক্ত করবেন। IE তে ttf [True Type Font ] সাফোর্ট করে না। তার জন্য eot (Embedded OpenType) ফন্ট ব্যবহার করতে হয়। এ জন্য আমরা একটি কমা দিয়ে eot ফন্ট এর utl যুক্ত করেছি। আপনার কাছে যদি eot ফন্ট না থাকে তাহলে গুগলে একটু সার্চ করলেই পেয়ে যাবেন।
আমাদের ফন্টফেইস রেডি হয়ে গেছে। এবার আমরা যেকোন জাগায় ব্যবহার করতে পারি। যত ইচ্ছে তত।
ব্যবহার করার জন্য লিখতে হয় ফন্ট ফ্যামিলি যেভাবে লিখি সেভাবেঃ
.myDiv
{
font-family:FontFace;
}
আর পুরো উদাহরনঃ
<!DOCTYPE html>
<html>
<head>
<style>
@font-face
{
font-family: FontFace;
src: url('MyFavoriteFont.ttf')
,url('MyFavoriteFont.eot'); /* For IE */
}
.myDiv
{
font-family:FontFace;
}
</style>
</head>
<body>
<div class="myDiv">
Some text with CSS3 Font Face feature.
</div>
</body>
</html>
‘MyFavoriteFont.ttf’ এর জাগায় আপনার ফন্ট এর নাম দিতে হবে। বিদ্রঃ আপনি যেখানে ফন্ট গুলো আপলোড করবেন সে url এখানে দিতে হবে। এখন যদি আপনি fonts নাকে একটা ডিরেক্ট্ররি খুলেন এবং তার ভেতর ফন্ট গুলো রাখেন তার জন লিখতে হবে ‘fonts/MyFavoriteFont.ttf’ ইত্যাদি…
এত কষ্ট করতে না চাইলে আরো সহজ ভাবে ব্যবহার করতে পারেন। গুগল ওয়েব ফন্টে অনেক গুলো ফন্ট আপলোড করা আছে। http://www.google.com/fonts/
এখানে গিয়ে পছন্দের ফন্ট সিলেক্ট করে Quick Use বাটনে ক্লিক করে আপনি ব্যবহার করতে পারেন। নিচের মত লিঙ্কটি আপনার সাইটের হেডার অংশে যুক্ত করবেনঃ
<link href='http://fonts.googleapis.com/css?family=Caesar+Dressing' rel='stylesheet' type='text/css'>
আর কিছু করতে হবে না। এর পর শুধু ঐ ফন্ট এর নাম ফন্টফ্যামিলিতে যুক্ত করবেনঃ font-family: ‘Caesar Dressing’, cursive;
গুগল ওয়েব ফন্ট এর একটি সম্পুর্ন উদাহরন, দেখান্র জন্য এখানে ক্লিক করতে পারেন।
<!DOCTYPE html>
<html>
<head>
<link href='http://fonts.googleapis.com/css?family=Sonsie+One' rel='stylesheet' type='text/css'>
<style>
.myDiv
{
font-family: 'Sonsie One', cursive;
text-align:center;
margin-top:10%;
color:#808080;
}
</style>
</head>
<body>
<div class="myDiv">
Some text with CSS3 Font Face feature.
</div>
</body>
</html>