এই নির্দেশিকাটি ব্যাখ্যা করে কিভাবে আপনার ওয়েব পৃষ্ঠাগুলিতে ফন্ট যোগ করতে Google Fonts API ব্যবহার করতে হয়। আপনাকে কোনো প্রোগ্রামিং করতে হবে না; আপনাকে যা করতে হবে তা হল আপনার HTML নথিতে একটি বিশেষ স্টাইলশীট লিঙ্ক যোগ করুন, তারপর একটি CSS স্টাইলে ফন্টটি দেখুন।
একটি দ্রুত উদাহরণ
এখানে একটি উদাহরণ. একটি ফাইলে নিম্নলিখিত HTML অনুলিপি করুন এবং পেস্ট করুন:
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Tangerine">
<style>
body {
font-family: 'Tangerine', serif;
font-size: 48px;
}
</style>
</head>
<body>
<div>Making the Web Beautiful!</div>
</body>
</html>
তারপরে একটি আধুনিক ওয়েব ব্রাউজারে ফাইলটি খুলুন। আপনি ট্যানজারিন নামক ফন্টে নিম্নলিখিতগুলি প্রদর্শন করা একটি পৃষ্ঠা দেখতে পাবেন:
এই বাক্যটি সাধারণ পাঠ্য, তাই আপনি CSS ব্যবহার করে এটি দেখতে কেমন তা পরিবর্তন করতে পারেন। আগের উদাহরণে শৈলীতে একটি ছায়া যোগ করার চেষ্টা করুন:
body {
font-family: 'Tangerine', serif;
font-size: 48px;
text-shadow: 4px 4px 4px #aaa;
}
আপনার এখন পাঠ্যের নীচে একটি ড্রপ শ্যাডো দেখতে হবে:
এবং এটি শুধুমাত্র ফন্ট এপিআই এবং সিএসএস দিয়ে আপনি যা করতে পারেন তার শুরু।
ওভারভিউ
আপনি মাত্র দুটি ধাপে Google Fonts API ব্যবহার শুরু করতে পারেন:
পছন্দসই ওয়েব ফন্ট(গুলি) অনুরোধ করতে একটি স্টাইলশীট লিঙ্ক যুক্ত করুন:
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Font+Name">
অনুরোধ করা ওয়েব ফন্ট সহ একটি উপাদান স্টাইল করুন, হয় একটি স্টাইলশীটে:
.css-selector { font-family: 'Font Name', serif; }অথবা উপাদানের একটি ইনলাইন শৈলী সহ:
<div style="font-family: 'Font Name', serif;">Your text</div>
আপনি ব্যবহার করতে পারেন এমন ফন্টগুলির একটি তালিকার জন্য, Google Fonts দেখুন।
একটি স্টাইলশীট URL-এ ফন্ট পরিবার এবং শৈলী নির্দিষ্ট করা
আপনার স্টাইলশীট লিঙ্কে কোন URL ব্যবহার করবেন তা নির্ধারণ করতে, Google Fonts API বেস URL দিয়ে শুরু করুন:
https://fonts.googleapis.com/css
তারপর, এক বা একাধিক ফন্ট পরিবারের নাম এবং শৈলী সহ family= URL প্যারামিটার যোগ করুন।
উদাহরণস্বরূপ, Inconsolata ফন্ট অনুরোধ করতে:
https://fonts.googleapis.com/css?family=Inconsolata
একাধিক ফন্ট পরিবারের অনুরোধ করতে, একটি পাইপ অক্ষর ( | ) দিয়ে নামগুলি আলাদা করুন।
উদাহরণস্বরূপ, Tangerine , Inconsolata , এবং Droid Sans ফন্টগুলির জন্য অনুরোধ করতে:
https://fonts.googleapis.com/css?family=Tangerine|Inconsolata|Droid+Sans
একাধিক ফন্টের অনুরোধ করা আপনাকে আপনার পৃষ্ঠায় সেই সমস্ত ফন্ট ব্যবহার করতে দেয়। (কিন্তু ওভারবোর্ডে যাবেন না; বেশিরভাগ পৃষ্ঠার খুব বেশি ফন্টের প্রয়োজন হয় না, এবং প্রচুর ফন্টের অনুরোধ করলে আপনার পৃষ্ঠাগুলি লোড হতে ধীর হয়ে যেতে পারে।)
Google Fonts API ডিফল্টরূপে অনুরোধ করা ফন্টের নিয়মিত সংস্করণ প্রদান করে। অন্যান্য শৈলী বা ওজনের জন্য অনুরোধ করতে, ফন্টের নামের সাথে একটি কোলন ( : ) যুক্ত করুন, তারপরে কমা ( , ) দ্বারা পৃথক করা শৈলী বা ওজনের একটি তালিকা অনুসরণ করুন।
যেমন:
https://fonts.googleapis.com/css?family=Tangerine:bold,bolditalic|Inconsolata:italic|Droid+Sans
একটি প্রদত্ত ফন্টের জন্য কোন স্টাইল এবং ওজন উপলব্ধ তা খুঁজে বের করতে, Google ফন্টে ফন্টের তালিকা দেখুন।
আপনার অনুরোধ করা প্রতিটি শৈলীর জন্য, আপনি সম্পূর্ণ নাম বা সংক্ষিপ্ত নাম দিতে পারেন; ওজনের জন্য, আপনি বিকল্পভাবে একটি সংখ্যাসূচক ওজন নির্দিষ্ট করতে পারেন:
| শৈলী | স্পেসিফায়ার |
|---|---|
| তির্যক | italic বা i |
| সাহসী | bold বা b বা একটি সংখ্যাসূচক ওজন যেমন 700 |
| সাহসী তির্যক | bolditalic বা bi |
উদাহরণ স্বরূপ, Cantarell italic এবং Droid Serif বোল্ড করার অনুরোধ করতে, আপনি নিম্নলিখিত যেকোনও ইউআরএল ব্যবহার করতে পারেন:
https://fonts.googleapis.com/css?family=Cantarell:italic|Droid+Serif:bold https://fonts.googleapis.com/css?family=Cantarell:i|Droid+Serif:b https://fonts.googleapis.com/css?family=Cantarell:i|Droid+Serif:700
ফন্ট-ডিসপ্লে ব্যবহার করুন
ফন্ট-ডিসপ্লে আপনাকে ফন্টটি অনুপলব্ধ থাকাকালীন কী ঘটবে তা নিয়ন্ত্রণ করতে দেয়। ডিফল্ট auto ব্যতীত অন্য একটি মান নির্দিষ্ট করা সাধারণত উপযুক্ত।
কোয়েরিস্ট্রিং display প্যারামিটারে পছন্দসই মানটি পাস করুন:
https://fonts.googleapis.com/css?family=Roboto&display=swap
স্ক্রিপ্ট উপসেট নির্দিষ্ট করা
Google ফন্ট ডিরেক্টরির কিছু ফন্ট একাধিক স্ক্রিপ্ট সমর্থন করে (যেমন ল্যাটিন, সিরিলিক এবং গ্রীক)। কোন উপসেটগুলি ডাউনলোড করা উচিত তা নির্দিষ্ট করার জন্য উপসেট প্যারামিটারটি URL-এ যুক্ত করা উচিত৷
উদাহরণস্বরূপ, Roboto Mono ফন্টের সিরিলিক উপসেটের অনুরোধ করতে, URLটি হবে:
https://fonts.googleapis.com/css?family=Roboto+Mono&subset=cyrillic
রোবোটো মনো ফন্টের গ্রীক উপসেট অনুরোধ করতে, URLটি হবে:
https://fonts.googleapis.com/css?family=Roboto+Mono&subset=greek
রোবোটো মনো ফন্টের গ্রীক এবং সিরিলিক উভয় উপসেটের অনুরোধ করতে, URLটি হবে:
https://fonts.googleapis.com/css?family=Roboto+Mono&subset=greek,cyrillic
ল্যাটিন উপসেট সবসময় অন্তর্ভুক্ত করা হয় যদি উপলব্ধ থাকে এবং নির্দিষ্ট করার প্রয়োজন হয় না। অনুগ্রহ করে মনে রাখবেন যদি কোনো ক্লায়েন্ট ব্রাউজার ইউনিকোড-রেঞ্জ সমর্থন করে ( http://caniuse.com/#feat=font-unicode-range ) উপসেট প্যারামিটার উপেক্ষা করা হয়; টেক্সট রেন্ডার করার জন্য যা প্রয়োজন তা পেতে ব্রাউজার ফন্ট দ্বারা সমর্থিত উপসেটগুলি থেকে নির্বাচন করবে।
উপলব্ধ ফন্ট এবং ফন্ট সাবসেটের সম্পূর্ণ তালিকার জন্য অনুগ্রহ করে Google ফন্টগুলি দেখুন।
আপনার ফন্ট অনুরোধ অপ্টিমাইজ করা
প্রায়শই, আপনি যখন আপনার ওয়েবসাইট বা অ্যাপ্লিকেশনে একটি ওয়েব ফন্ট ব্যবহার করতে চান, আপনি আগে থেকেই জানেন যে আপনার কোন অক্ষরগুলির প্রয়োজন হবে৷ এটি প্রায়ই ঘটে যখন আপনি একটি লোগো বা শিরোনামে একটি ওয়েব ফন্ট ব্যবহার করছেন।
এই ক্ষেত্রে, আপনার ফন্ট অনুরোধ URL-এ একটি text= মান উল্লেখ করার কথা বিবেচনা করা উচিত। এটি Google কে আপনার অনুরোধের জন্য অপ্টিমাইজ করা একটি ফন্ট ফাইল ফেরত দেওয়ার অনুমতি দেয়৷ কিছু ক্ষেত্রে, এটি ফন্ট ফাইলের আকার 90% পর্যন্ত কমাতে পারে।
এই বৈশিষ্ট্যটি ব্যবহার করতে, আপনার Google Fonts API অনুরোধে শুধু text= যোগ করুন। উদাহরণস্বরূপ আপনি যদি শুধুমাত্র আপনার ব্লগের শিরোনামের জন্য Inconsolata ব্যবহার করেন, তাহলে আপনি শিরোনামটিকেই text= এর মান হিসাবে রাখতে পারেন। অনুরোধটি দেখতে কেমন হবে তা এখানে:
https://fonts.googleapis.com/css?family=Inconsolata&text=Hello
সমস্ত ক্যোয়ারী স্ট্রিংগুলির মতো, আপনার মানটিকে URL-এনকোড করা উচিত:
https://fonts.googleapis.com/css?family=Inconsolata&text=Hello%20World
এই বৈশিষ্ট্যটি আন্তর্জাতিক ফন্টগুলির জন্যও কাজ করে, যা আপনাকে UTF-8 অক্ষর নির্দিষ্ট করার অনুমতি দেয়। উদাহরণস্বরূপ, হোলা! হিসাবে প্রতিনিধিত্ব করা হয়:
https://fonts.googleapis.com/css?family=Inconsolata&text=%c2%a1Hola!
ফন্ট প্রভাব সক্রিয় করা হচ্ছে (বিটা)
আপনার ওয়েবসাইটে শিরোনাম বা পাঠ্য প্রদর্শন করার সময়, আপনি প্রায়শই আপনার পাঠ্যকে একটি আলংকারিক উপায়ে স্টাইলাইজ করতে চাইবেন। আপনার কাজকে সহজ করার জন্য, Google ফন্ট ইফেক্টের একটি সংগ্রহ প্রদান করেছে যা আপনি সুন্দর ডিসপ্লে টেক্সট তৈরি করতে ন্যূনতম প্রচেষ্টায় ব্যবহার করতে পারেন। যেমন:
এই বিটা বৈশিষ্ট্যটি ব্যবহার করার জন্য, আপনার Google Fonts API অনুরোধে শুধুমাত্র effect= যোগ করুন এবং আপনি যে HTML উপাদান(গুলি) প্রভাবিত করতে চান তার সাথে সংশ্লিষ্ট শ্রেণীর নাম যোগ করুন। উপরের আমাদের উদাহরণে, আমরা shadow-multiple ফন্ট প্রভাব ব্যবহার করেছি, তাই অনুরোধটি দেখতে এরকম হবে:
https://fonts.googleapis.com/css?family=Rancho&effect=shadow-multiple
প্রভাব ব্যবহার করতে, আপনার HTML উপাদান(গুলি) এর সাথে সংশ্লিষ্ট শ্রেণীর নাম যোগ করুন। সংশ্লিষ্ট শ্রেণির নাম সর্বদা font-effect- এর সাথে উপসর্গযুক্ত প্রভাবের নাম, তাই shadow-multiple ক্লাসের নাম হবে font-effect-shadow-multiple :
<div class="font-effect-shadow-multiple">This is a font effect!</div>
আপনি একটি পাইপ অক্ষর ( | ) দিয়ে প্রভাবের নামগুলি আলাদা করে একাধিক প্রভাবের অনুরোধ করতে পারেন।
https://fonts.googleapis.com/css?family=Rancho&effect=shadow-multiple|3d-float
এখানে আমরা যে সমস্ত ফন্ট প্রভাবগুলি অফার করি তার একটি সম্পূর্ণ তালিকা রয়েছে:
| প্রভাব | API নাম | ক্লাসের নাম | সমর্থন |
|---|---|---|---|
| অ্যানাগ্লিফ | anaglyph | font-effect-anaglyph | ক্রোম, ফায়ারফক্স, অপেরা, সাফারি |
| ইট সাইন | brick-sign | font-effect-brick-sign | ক্রোম, সাফারি |
| ক্যানভাস প্রিন্ট | canvas-print | font-effect-canvas-print | ক্রোম, সাফারি |
| কর্কশ | crackle | font-effect-crackle | ক্রোম, সাফারি |
decaying | font-effect-decaying | ক্রোম, সাফারি | |
| ধ্বংস | destruction | font-effect-destruction | ক্রোম, সাফারি |
| ব্যথিত | distressed | font-effect-distressed | ক্রোম, সাফারি |
| কষ্টগ্রস্ত কাঠ | distressed-wood | font-effect-distressed-wood | ক্রোম, সাফারি |
| এমবস | emboss | font-effect-emboss | ক্রোম, ফায়ারফক্স, অপেরা, সাফারি |
| আগুন | fire | font-effect-fire | ক্রোম, ফায়ারফক্স, অপেরা, সাফারি |
| ফায়ার অ্যানিমেশন | fire-animation | font-effect-fire-animation | ক্রোম, ফায়ারফক্স, অপেরা, সাফারি |
| ভঙ্গুর | fragile | font-effect-fragile | ক্রোম, সাফারি |
| ঘাস | grass | font-effect-grass | ক্রোম, সাফারি |
| বরফ | ice | font-effect-ice | ক্রোম, সাফারি |
| মাইটোসিস | mitosis | font-effect-mitosis | ক্রোম, সাফারি |
| নিয়ন | neon | font-effect-neon | ক্রোম, ফায়ারফক্স, অপেরা, সাফারি |
| রূপরেখা | outline | font-effect-outline | ক্রোম, ফায়ারফক্স, অপেরা, সাফারি |
| সবুজ নির্বাণ | putting-green | font-effect-putting-green | ক্রোম, সাফারি |
| স্কাফড স্টিল | scuffed-steel | font-effect-scuffed-steel | ক্রোম, সাফারি |
| ছায়া একাধিক | shadow-multiple | font-effect-shadow-multiple | ক্রোম, ফায়ারফক্স, অপেরা, সাফারি |
| স্প্লিন্টারড | splintered | font-effect-splintered | ক্রোম, সাফারি |
| স্থির | static | font-effect-static | ক্রোম, সাফারি |
| স্টোনওয়াশ | stonewash | font-effect-stonewash | ক্রোম, সাফারি |
| ত্রিমাত্রিক | 3d | font-effect-3d | ক্রোম, ফায়ারফক্স, অপেরা, সাফারি |
| থ্রি ডাইমেনশনাল ফ্লোট | 3d-float | font-effect-3d-float | ক্রোম, ফায়ারফক্স, অপেরা, সাফারি |
| ভিনটেজ | vintage | font-effect-vintage | ক্রোম, সাফারি |
| ওয়ালপেপার | wallpaper | font-effect-wallpaper | ক্রোম, সাফারি |
আপনার ফন্ট স্টাইল করার আরও অনেক উপায় রয়েছে এবং CSS এর মাধ্যমে অনেক কিছু সম্ভব। আপনাকে শুরু করার জন্য আমরা কেবল কয়েকটি ধারণা প্রদান করছি। আরও ধারণার জন্য, Google অনুসন্ধান করে দেখুন " css text effect " এবং ওয়েবে ইতিমধ্যেই রয়েছে এমন অনেক ধারনা ব্রাউজ করুন!
আরও পড়া
- Google Fonts এ Google Fonts API দ্বারা প্রদত্ত ফন্ট পরিবারের একটি সম্পূর্ণ তালিকা দেখুন।
- হরফ লোড করার উপর আরো নিয়ন্ত্রণ পেতে কিভাবে ওয়েব ফন্ট লোডার ব্যবহার করবেন তা শিখুন।
- প্রযুক্তিগত বিবেচনার পৃষ্ঠায় Google ফন্ট API কীভাবে কাজ করে সে সম্পর্কে আরও জানুন।