কিভাবে CSS এ গুগল ওয়েব ফন্ট ইম্পোর্ট করবেন?

ওয়েব ডেভেলপমেন্টে, ফন্ট স্টাইলিং এর সঠিক ব্যবহার অ্যাপ্লিকেশনটিকে একটি আকর্ষণীয় চেহারা প্রদান করে। এই ফন্ট শৈলীগুলি নথির পড়ার ক্রম সম্পর্কে চাক্ষুষ সূত্র দেয়। উদাহরণস্বরূপ, নথির শিরোনামের ফন্ট শৈলী অবশ্যই অন্যদের থেকে সাহসী এবং তাৎপর্যপূর্ণ হতে হবে। স্টাইলিং অন্যদের থেকে গুরুত্বপূর্ণ বিষয়বস্তু আলাদা করতে সাহায্য করে।

এই নিবন্ধটির শেখার ফলাফল হল:

• গুগল ওয়েব ফন্ট কি?
• কিভাবে HTML এ গুগল ফন্ট ইম্পোর্ট করবেন?
• কিভাবে CSS ফাইলে গুগল ফন্ট ব্যবহার করবেন?

গুগল ওয়েব ফন্ট কি?

Google ওয়েব ফন্ট হল একটি ওপেন সোর্স লাইব্রেরি যাতে শত শত ফন্ট শৈলী বা পরিবার রয়েছে। এটি এপিআইও প্রদান করে যা আমাদেরকে অ্যান্ড্রয়েড এবং সিএসএসের সাথে ওয়েব ফন্ট ব্যবহার করতে সাহায্য করে। Google ফন্ট অন্যান্য ফন্ট লাইব্রেরির তুলনায় অনেক হালকা এবং ব্যবসায়িক ব্যবহারের জন্য বিনামূল্যে পাওয়া যায়। এগুলি যে কোনও ওয়েবসাইটে প্রয়োগ করা সহজ।

ডিফল্টরূপে, CSS ফ্যান্টাসি, সেরিফ, সান সেরিফ, কার্সিভ এবং মনোস্পেস ফন্ট শৈলী অফার করে। আপনি যদি অন্য কিছু ফন্ট শৈলী ব্যবহার করতে চান তবে Google ফন্টগুলি ব্যবহার করা যেতে পারে।

কিভাবে HTML এ গুগল ফন্ট ইম্পোর্ট করবেন?

একটি HTML পৃষ্ঠায় Google ফন্ট ব্যবহার করতে, নিম্নলিখিত পদক্ষেপগুলি অনুসরণ করুন৷

ধাপ 1: ফন্ট পরিবার নির্বাচন করুন

প্রথম, খুলুন গুগল ফন্ট অফিসিয়াল ওয়েবসাইট এবং আপনার পছন্দের ফন্ট নির্বাচন করুন। উদাহরণস্বরূপ, আমরা বেছে নিয়েছি ' লবস্টার দুই 'ফন্ট-পরিবার:

ধাপ 2: শৈলী নির্বাচন করুন

এরপরে, শৈলীর তালিকা দেখতে নিচে স্ক্রোল করুন। এগুলিকে আপনার সংগ্রহে যোগ করুন ' + ' চিহ্ন:

ধাপ 3: নির্বাচিত পরিবার দেখুন

নির্বাচিত পরিবারগুলি দেখতে, নীচে হাইলাইট করা আইকনে ক্লিক করুন:

ধাপ 4: HTML এ এম্বেড করার জন্য লিঙ্কটি অনুলিপি করুন

এর পরে, নীচে স্ক্রোল করুন এবং হাইলাইট করা ' ব্যবহার করে ফন্ট-পরিবারের লিঙ্কটি অনুলিপি করুন কপি আইকন:

কিভাবে CSS ফাইলে গুগল ফন্ট ব্যবহার করবেন?

স্টাইলিং এর জন্য CSS-এ Google ফন্টের অনুলিপি ব্যবহার করতে, প্রদত্ত উদাহরণগুলি দেখুন।

উদাহরণ 1

একটি অন্তর্ভুক্ত করুন

কিছু বিষয়বস্তু বা অনুচ্ছেদ নির্দিষ্ট করতে উপাদান: