পদ্ধতি - ১: গুগল ফন্ট ইম্পোর্ট এবং @theme ব্যবহার করে input.css ফাইলে
/* 📄 input.css */
@import url("https://fonts.googleapis.com/css2?family=Roboto&display=swap");
@import "tailwindcss";
@theme {
--font-roboto: "Roboto", sans-serif;
}
টিপস:
ব্রাউজার রুল অনুসারে @import সবসময় CSS ফাইলের একদম উপরে রাখতে হবে, যাতে সব ফন্ট ঠিকভাবে লোড হয়।
এখন HTML-এ ক্লাস হিসেবে ব্যবহার করোঃ
<div class="font-roboto">
<!-- তোমার কনটেন্ট -->
</div>
ফন্টের ফিচার এবং ভ্যারিয়েশন সেট করো:
@theme {
--font-roboto: "Roboto", sans-serif;
--font-display--font-feature-settings: "cv02", "cv03", "cv04", "cv11";
--font-display--font-variation-settings: "opsz" 32;
}
***পদ্ধতি -২ : লোকাল ফাইল থেকে input.css এ ,
কাস্টম ফন্ট লোড করো (লোকাল ফাইল)
/* 📄 input.css */
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url('/fonts/Roboto-Regular.woff2') format('woff2');
}
পদ্ধতি - ৩ : গুগল ফন্ট লিংক ব্যবহার করে index.html ফাইলে
<!-- public/index.html -->
<head>
...
<!-- public/index.html -->
<head>
...
<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">
</head>
HTML এ সরাসরি ফন্ট অ্যাপ্লাই করো:
<div style={{ fontFamily: "'Roboto', sans-serif" }} className="text-xl text-gray-800">
এই লেখাটি গুগল ফন্ট ব্যবহার করে লেখা হয়েছে।
</div>
অথবা Custom CSS ক্লাস বানিয়ে input.css এ ব্যবহার করো
//input .css ফাইল এ
/* 📄 input.css */
.roboto-font {
font-family: 'Roboto', sans-serif;
}
***HTML Tag এ ব্যবহার
<div className="roboto-font text-xl text-gray-800">
এই লেখাটি গুগল ফন্ট ব্যবহার করে লেখা হয়েছে।
</div>