font-family CSS নিয়ম আপনাকে একটি HTML ওয়েব ডকুমেন্টের ফন্ট নির্ধারণ করতে দেয়। এক্সটার্নাল ফন্ট রেফার করতে, আপনি url() মেথড ব্যবহার করে একটি ফন্ট ফেস নির্ধারণ করতে পারেন। অথবা, আপনি Google Fonts-এর মতো একটি সাইট থেকে একটি ফন্ট CSS ফাইল এম্বেড করতে পারেন।
ডেভেলপাররা হিসেবে, একসময় আসবে যখন আমরা আমাদের HTML প্রসেস হওয়ার সময় পপুলেট হওয়া ডিফল্ট ফন্ট ব্যবহার করতে চাইব না। এই নিবন্ধটি আপনাকে কীভাবে সেরা অনুশীলন মেনে আপনার HTML ডকুমেন্টের ফন্ট পরিবর্তন করবেন সেটি দেখানোর লক্ষ্যে।
HTML-এ ফন্ট কীভাবে পরিবর্তন করবেন
HTML-এ একটি ওয়েব পেজের ফন্ট পরিবর্তন করার তিনটি পদ্ধতি আছে:
- font-family নিয়ম দিয়ে বিল্ট-ইন ফন্ট ব্যবহার করা।
- font-face নিয়ম ব্যবহার করে এক্সটার্নাল ফন্ট রেফার করা।
- এক্সটার্নাল CSS স্টাইলশিট ব্যবহার করে ওয়েব পেজের ফন্ট স্টাইল করা।
এই নিবন্ধে, আমরা ফন্ট পরিবর্তনের এই তিনটি পদ্ধতি সম্পর্কে আলোচনা করব।
HTML ফন্ট পরিবর্তন: বিল্ট-ইন Font-Family
আমরা আমাদের ফন্ট পরিবর্তন করার প্রথম পদ্ধতি হলো আমাদের ইনলাইন স্টাইলিং-এ font-family প্রপার্টি ব্যবহার করা। এটি এভাবে করা যায়:
<p style="font-family:wingdings;" id="wingdings">New York</p>
আমরা সাদা font-family প্রপার্টি ব্যবহার করে ইঙ্গিত দিই যে আমাদের টেক্সট ব্লকে কোন ফন্ট ব্যবহার করতে চাই। অনেক স্ট্যান্ডার্ড ফন্ট সহজে ব্যবহার করার জন্য উপলব্ধ।
একটি ব্যাকআপ ফন্ট রাখা একটি ভালো ধারণা, যেন প্রথম ফন্ট-চয়েস লোড না হলে কাজ আসে। এটি খুব সহজ, শুধু একটি কমা এবং নতুন font-family নাম যোগ করুন। আমি সবসময় একটি জেনেরিক গ্রুপিং দিয়ে শেষ করি সেই এক এজ কেসের জন্য যে প্রথম দুটি উপলব্ধ নয়।
<p style="font-family: Roboto, Lato, sans-serif" id="roboto-plus-backups">New York</p>
শেষে জেনেরিক গ্রুপিং শুধু ক্লায়েন্ট যে ডিভাইস ব্যবহার করছে তার ডিফল্ট sans-serif ফন্ট। আমাদের উপলব্ধ জেনেরিক ফ্যামিলি নামগুলো: monospace, serif, sans-serif, cursive, এবং fantasy। আপনি কিছু নির্দিষ্ট ফন্টও অ্যাক্সেস করতে পারেন যেমন Times New Roman।
৮১% অংশগ্রহণকারী বলেছেন বুটক্যাম্পে অংশ নেওয়ার পর তাদের টেক জব প্রস্পেক্টস সম্পর্কে অধিক আত্মবিশ্বাসী অনুভব করছেন। আজই একটি বুটক্যাম্পের সাথে ম্যাচ হোন।
গড় বুটক্যাম্প স্নাতক ক্যারিয়ার ট্রানজিশনে ছয় মাস কম ব্যয় করেছেন, বুটক্যাম্প শুরু থেকে প্রথম চাকরি পাওয়া পর্যন্ত।
HTML ফন্ট পরিবর্তন: font-face ব্যবহার
আপনি font-face নিয়ম ব্যবহার করে একটি এক্সটার্নাল সোর্স থেকে ফন্ট আপনার ওয়েব পেজে ইম্পোর্ট করতে পারেন।
এই পদ্ধতি ব্যবহার করতে, আপনার একটি এক্সটার্নাল ফন্ট ডকুমেন্টে অ্যাক্সেস থাকতে হবে। ফন্ট ডকুমেন্টগুলো সাধারণত ".ttf" এক্সটেনশন থাকে।
চলুন font-face অ্যাট্রিবিউট ব্যবহার করে ফন্ট পরিবর্তন কীভাবে করবেন সেটি দেখা যাক। এখানে আমাদের যে CSS স্টাইল নিয়মটি দরকার:
@font-face { font-family: "Open Sans"; src: url(yoururl); }
আমরা আমাদের নতুন ফন্ট ঘোষণা করতে font-face স্টাইল অ্যাট্রিবিউট ব্যবহার করি। font-family অ্যাট্রিবিউট আমাদের নতুন ফন্টের নাম নির্ধারণ করে। src: url() আমাদের CSS ডকুমেন্টকে নির্দেশ করে আমাদের ফন্ট কোথায় পাওয়া যাবে। "yoururl" এর মান আপনার টেক্সট ফন্টের URL হওয়া উচিত।
আমাদের ফন্ট এখনো আমাদের ওয়েব পেজ পরিবর্তন করবে না। আমাদের CSS স্টাইলশিটকে বলতে হবে কোন এলিমেন্টগুলো আমাদের নতুন ফন্ট ব্যবহার করবে:
h1, h2, h3 { font-family: "Open Sans"; }
এই কোড আমাদের CSS স্টাইলশিটকে বলে "Open Sans" ফন্টটি আমাদের ওয়েব পেজের কিছু এলিমেন্টে প্রয়োগ করতে। h1, h2, h3 একটি CSS সিলেক্টর যা আমাদের স্টাইলকে লিস্ট করা এলিমেন্টগুলিতে প্রয়োগ করে। এই এলিমেন্টগুলো HTML হেডিং।
HTML ফন্ট পরিবর্তন: এক্সটার্নাল CSS ফন্ট
Google Fonts-এর মতো কিছু সাইট আপনাকে একটি CSS স্টাইলশিট ব্যবহার করে আপনার সাইটে একটি ফন্ট এম্বেড করতে দেয়। এই স্টাইলগুলো আপনাকে CSS অ্যাট্রিবিউট ব্যবহার করে ফন্ট টাইপ নির্ধারণ করতে দেয়। এই উদাহরণে, আমরা Google Fonts থেকে 'Bangers' এবং 'Yellowtail' ফন্ট ব্যবহার করার চেষ্টা করব:
<p id="sans-serif" style="font-family: Bangers, sans-serif" >New York</p> <p id="cursive" style="font-family: Yellowtail, cursive" >New York</p>
আপনি যদি উপরের কোডটি আপনার পছন্দের IDE-এ রান করে লোড করেন, এটি জেনেরিক ফন্টে ডিফল্ট হবে। আপনি যদি এই ফন্টগুলো ব্যবহার করতে চান, তবে কিছু সিম্পল ক্লিক দিয়ে করতে পারেন:
- Google Fonts ভিজিট করুন।
- যদি চান তো সাইটটিতে একটু ঘুরে বের করুন। এখানে ফন্টের অপরিমিত অপশন আছে। আপনি স্যাম্পল টেক্সট কাস্টমাইজ করতে পারেন যা আপনি চান। ওয়েব পেজের টপে একটি ইনপুট আছে আপনার পছন্দের টেক্সট দিতে।
- 'Yellowtail' সার্চ করুন এবং এটিতে ক্লিক করুন। আপনি ফন্ট সম্পর্কে বিস্তারিত তথ্যের একটি স্ক্রিনে যাবেন। "+ Select This Style" বাটনটি খুঁজুন এবং এটিতে ক্লিক করুন।
- একটি সাইডবার ড্রয়ার পপ আউট হবে আপনার সিলেকশনের তথ্য নিয়ে। এটি খোলা থাকবে যতক্ষণ আপনি আরও ফন্ট ব্রাউজ করবেন। স্ক্রিনের টপে Browse Fonts লিংকটি ক্লিক করুন এবং 'Bangers' সার্চ করুন। 'Yellowtail'-এর জন্য যেটি করলেন সেই প্রসেসটি ফলো করুন।
- সাইডবারে, আপনি 'Embed' ট্যাবটি দেখবেন। এটিতে ক্লিক করুন।
- <link> অপশনটি ইতিমধ্যে হাইলাইট করা থাকবে। <link> কপি করে আপনার HTML-এর head-এ পেস্ট করুন।
- CSS-এ প্রতিটি ফন্ট কীভাবে ব্যবহার করবেন সেটির গাইডলাইন ফলো করুন। সেগুলো রিকমেন্ডেড ব্যাকআপ ফন্টও দেয়।
- বাস! আপনি আপনার ডকুমেন্টে এই ফন্টগুলো ব্যবহার করার জন্য প্রস্তুত।
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>repl.it</title> <link href="style.css" rel="stylesheet" type="text/css" /> <link href="https://fonts.googleapis.com/css2?family=Bangers&family=Yellowtail&display=swap" rel="stylesheet"> </head> <body> <p id="courier">New York</p> <p id="roboto">New York</p> <p id="raleway" style="font-family: Raleway, sans-serif">New York</p> <p id="serif" style="font-family: Courier New">New York</p> <p id="monospace" style="font-family: Roboto Monospace, monospace">New York</p> <p id="sans-serif" style="font-family: Bangers, Anton, sans-serif" >New York</p> <p id="cursive" style="font-family: Yellowtail, cursive" >New York</p> <p id="roboto-condensed" style="font-family: Roboto Condensed, sans-serif">New York</p> </body> </html>
উপরের ওয়ার্কিং ডেমোতে বিল্ট-ইন এবং থার্ড পার্টি উভয় ফন্ট ব্যবহার করা হয়েছে। অন্যান্য ফন্ট ইম্পোর্ট করার চেষ্টা করুন!
উপসংহার
আপনি font-family অ্যাট্রিবিউট ব্যবহার করে বা কাস্টম ফন্টসহ একটি এক্সটার্নাল CSS স্টাইলশিট ব্যবহার করে HTML ফন্ট পরিবর্তন করতে পারেন। আপনার সাইটের CSS-এ একটি কাস্টম ফন্ট এম্বেড করতে, আপনি font-face নিয়ম ব্যবহার করতে পারেন।
আপনি কি HTML-এ কোডিং সম্পর্কে আরও জানতে চান? আমাদের How to Learn HTML গাইড পড়ুন। এই গাইডে আপনি HTML শিখার টপ টিপস এবং সেরা অনলাইন কোর্সের গাইডেন্স পাবেন।
