ফন্ট এম্বেড কি ?
একটি ওয়েবসাইটে যদি কোন ফন্ট ব্যবহার করা হয়ে থাকে যা কম্পিউটারে ইনস্টল করা নাই, তাহলে সেই ওয়েবসাইটে ব্যবহৃত ফন্টটি ভালোমত দেখা যাবে না। এমনকি সেই ফন্ট ব্যবহার করে কোন লেখা দেখা নাও যেতে পারে। অনেক সময় চারকোনা বাক্স দেখা যায় সেই লেখাটির পরিবর্তে। এই জন্য আমাদের নতুন কোন ফন্ট ওয়েবসাইটে ব্যবহার করতে হলে সেই নতুন ফন্টটি ওয়েবসাইটের সাথে যুক্ত করে দিতে হবে, একে ‘ফন্ট এম্বেডিং’ বলে।
কোথায় এটি প্রয়োজন হয় ?
যে কোন ধরনে ওয়েবসাইট বা মোবাইল এ্যাপ্লিকেশান বা সফ্টওয়্যার এর জন্য এই ফন্ট এম্বেডিং এর প্রয়োজন হয়ে থাকে।
কি করে করতে হয় ?
তাহলে দেখা যাক কি করে ফন্ট এম্বেড করতে হয় –
- প্রথমে একটি ফোল্ডার তৈরি করি এবং নাম দেই ‘fontTest’।
- একটি টেক্সট ফাইল তৈরি করি ‘fontTest.txt’ নামে এবং ফাইলটি ওপেন করে নিচের কোডগুলি লিখি।
<!DOCTYPE html>
<html>
<head>
<title>Font Test</title>
</head>
<body>
<div id=”fonttest“>Font Test 2013</div>
</body>
</html>
- ‘fontTest.txt’ নামক ফাইলটিকে ‘fontTest’ নামক ফোল্ডারটির ভিতরে রেখে দেই এবং ফাইলটির নাম পরিবর্তন করে ‘fontTest.html’ করি।
- এইবার যে ফন্টটি এম্বেড করবো সেই ফন্টটি সংগ্রহ করি। মনে করি ফন্টটির নাম ‘Arkitech Light’।
- এখন এই ‘http://www.font-face-generator.com/’ ওয়েবসাইটটিতে গিয়ে ‘Browse’ বাটনে ক্লিক করতে হবে এবং ফন্ট ফাইলটি সেলেক্ট করে ‘GENERATE’ বাটনে ক্লিক করতে হবে।
- কিছু সময় অপেক্ষা করার পর নিচেই একটি কনফারমেশান ম্যাসাজ আসবে ‘Click [ — HERE — ] to download your file.’
- সেখান থেকে ‘HERE’ লেখাটিতে ক্লিক করে একটি ZIP ফাইল ডাউনলোড করে নিতে হবে।
- জীপ ফাইলটিকে আনজীপ করে নিয়ে এর ভিতরকার সকল ফাইল কপি করে নিয়ে ‘fontTest’ নামক ফোল্ডারটির ভিতরে একটি ‘fonts’ নামক নতুন ফোল্ডার তৈরি করে এর ভিতরে রেখে দিতে হবে।
- দেখা যাবে ফাইলগুলির সাথে একটি ‘html’ ফাইলও আসবে। সেটাকে ওপেন করে নিতে হবে। সেখানে বলা রয়েছে কি করে ফন্টটি ব্যবহার করতে হবে।
- সেখান থেকে ‘@font-face’ এই লেখাটি খুঁজে নিয়ে এর অধীনের সকল কোড কপি করে নিতে হবে এইভাবে –
@font-face {
font-family: “Arkitech Light”;
src: url(‘205413819-Arkitech-Light.eot’);
src: url(‘205413819-Arkitech-Light.eot?#iefix’) format(’embedded-opentype’),
url(‘205413819-Arkitech-Light.svg#Arkitech Light’) format(‘svg‘),
url(‘205413819-Arkitech-Light.woff’) format(‘woff’),
url(‘205413819-Arkitech-Light.ttf’) format(‘truetype’);
font-weight: normal;
font-style: normal;
}
- কপি করা কোডগুলি আমাদের ‘fontTest.html’ ফাইলটির <head> </head> ট্যাগের ভিতরে CSS স্টাল ট্যাগ যুক্ত করে এর ভিতরে পেস্ট করে দিতে হবে। অর্থাৎ ‘<head>’ ট্যাগের পরে এবং ‘</head>’ ট্যাগের আগে।
- লক্ষ রাকতে হবে যে এখানে ফাইলগুলির পথ দেখা রয়েছে কিন্তু কোন ‘fonts’ ফোল্ডারের কথা বলা নেই। আমাদের ‘fonts’ ফোল্ডারটি বসিয়ে দিয়ে পথটি পরিবর্তিত করে নিতে হবে। কারন আমাদের ফন্ট রয়েছে ‘fonts’ নামক ফোল্ডারটির ভিতরে। শুধুমাত্র ‘font-family’ এর লাইনটি বাদ রেখে পরবর্তী সকল স্থানে পাথটি বসিয়ে দিতে হবে। কিছুটা নিচের মত দেখা যাবে।
<style>
@font-face {
font-family: “Arkitech Light”;
src: url(‘fonts/205413819-Arkitech-Light.eot’);
src: url(‘fonts/205413819-Arkitech-Light.eot?#iefix’) format(’embedded-opentype’),
url(‘fonts/205413819-Arkitech-Light.svg#Arkitech Light’) format(‘svg‘),
url(‘fonts/205413819-Arkitech-Light.woff’) format(‘woff’),
url(‘fonts/205413819-Arkitech-Light.ttf’) format(‘truetype’);
font-weight: normal;
font-style: normal;
}
</style>
- এখন ফন্টটি ‘body’ তে ব্যবহার করবো, যেন ‘body’ ট্যাগের ভিতরে সকল লেখা দেখা যায়। এইভাবে যেখানে যেখানে ফন্টটি ব্যবহার করা হবে সেখানে সেখানে ফন্টটির কথা উল্ল্যেখ করে দিতে হবে। নিচের ‘body’ ট্যাগের অধীনের সিএসএস কোডগুলি ‘<style>’ এর পরে বসিয়ে নিতে হবে। যেমন :
body{
font-family: ‘Arkitech Light’, arial;
font-size:16pt;
direction: ltr;
}
- এইবার আমাদের ‘<div>’ এর জন্য একটি আইডি নিয়েছিলাম ‘<div id=”fonttest”>’, এর জন্য সিএসএস লিখতে হবে-
#fonttest{
font-family: ‘Arkitech Light’, arial;
}
- আমাদের সম্পূর্ন সিএসএস কোডগুলি এখন দেখা যাবে এমন –
<style>
@font-face {
font-family: “Arkitech Light”;
src: url(‘fonts/205413819-Arkitech-Light.eot’);
src: url(‘fonts/205413819-Arkitech-Light.eot?#iefix’) format(’embedded-opentype’),
url(‘fonts/205413819-Arkitech-Light.svg#Arkitech Light’) format(‘svg‘),
url(‘fonts/205413819-Arkitech-Light.woff’) format(‘woff’),
url(‘fonts/205413819-Arkitech-Light.ttf’) format(‘truetype’);
font-weight: normal;
font-style: normal;
}
body{
font-family: ‘Arkitech Light’, arial;
font-size:16pt;
direction: ltr;
}
#fonttest{
font-family: ‘Arkitech Light’, arial;
}
</style>
- আমাদের পেজটি এখন ওপেন করলে আমরা আমাদের নতুন ফন্টটি দিয়ে লেখা ‘Font Test 2013’ লেখাটি দেখতে পাবো। এটি এখন সকল ব্রাউজারেই দেখা যাবে।
- এই জন্য আমাদের সিএসএস এর ভিতরে ফন্ট এর কথা বলে দিতে হয়েছিল এইভাবে –
font-family: ‘Arkitech Light’, arial;
Font-Family এর প্রথমটি হচ্ছে আমাদের নতুন ফন্টটি যেটাকে আমরা এম্বেড করেছি। এটি আমাদের কম্পিউটার বা অন্য কোন ডিভাইসে ইনস্টল করা না থাকলেও কাজ করবে। এবং যদি কোন সমস্যা হয় তাহলে এর পরিবর্তে ‘arial’ ফন্টটি দ্বারা কাজ হবে।
লেখা : এলিন (২০১৩)
