আসসালামু আলাইকুম, কেমন আছেন সবাই আশা করি ভাল আছেন? আমিও আপনাদের দোয়াতে এবং আল্লাহ্’র অশেষ রহমতে অনেক ভাল আছি, আজ আপনাদের দেখাবো ওয়েব ডিজাইনে কিভাবে আপনার পছন্দমত ফন্ট ব্যবহার করবেন? [এটা যারা জানে না তাদের জন্য, আপনি জেনে থাকলে দূরে থাকুন]
আমাদের যেকোন ওয়েব ডিজাইনের সময় বিভিন্ন স্থানে বিভিন্ন style এর ফন্ট ব্যবহার করার প্রয়োজন হয়ে থাকে, এটা সাধারনত দুইটি পদ্ধতি অবলম্বন করে থাকি- ১. গুগল ফন্ট, ২. ডাউনলোড কৃত ফন্ট। আমরা দুটি পদ্ধতি’ই দেখব।
**************১. গুগল ফন্ট ব্যবহার************
. প্রথমে আপনি যে ফন্টটি ব্যবহার করতে চান সেই ফন্টের নাম জানুন।
. এবার এই ঠিকানায় যান
. বাম পাশে দেখুন একটি সার্চ বক্স আছে সেখানে আপনার ফন্টের নাম লিখুন (বুঝতে অসুবিধা হলে নিচের ছবিটি দেখুন।)
Screenshot_1.png
ফন্টের নাম লিখে ইন্টার প্রেস করুন, যদি আপনার কাঙ্খিত ফন্টটি গুগলের কাছে থাকে তাহলে ডান পাশে দেখাবে (নিচের ছবি দেখুন)
Screenshot_2.png
এবার এটি ব্যবহার করার জন্য আপনাকে দুটি কাজ করতে হবে, প্রথমটি হলো আপনাকে ফন্টটি কল করতে হবে, দ্বিতীয় হলো ফন্টটি ফন্ট ফ্যামীলি হিসেবে ব্যবহার করতে হবে।
তাহলে প্রথমে কল করে নিন নিচের ছবিটি দেখে সেখানে ক্লিক করুন।
Screenshot_3.png
ক্লিক করার সাথে সাথে ঐ ফন্টের কত গুলো ষ্টাইল আছে তা শো করবে, এখান থেকে আপনার যে যে ষ্টাইল দরকার সেই ষ্টাইল গুলোতে টিক দিন।
এখানে দেখুন ডান পাশে page load নামে একটি অপশন আছে সেখানে আপনি দেখতে পাবেন আপনার সিলেক্ট করার ফন্ট লোড হতে কতটুকু সময় লাগবে, বা কোন ফন্ট লোড নিতে কত বেশি টাইম লাগবে।
এবার একদম নিচের দিকে যান সেখানে আপনি ট্যাব আকারে তিনটি অপশন পাবেন, এখান থেকে আপনি যে কোন একটি অপশন ব্যবহার করতে পারবেন
যদি standard ব্যবহার করতে চান তাহলে standard ঘরে থাকা কোর্ডটি কপি করে আপনার থিমের </head> ট্যাগের উপরে বসিয়ে দিন।
আর যদি @import ব্যবহার করতে চান তাহলে @import ঘরে থাকা কোর্ডটি কপি করে আপনার style.css ফাইলে যে কোন স্থানে পেষ্ট করুন।
হয়ে গেলো আমাদের কল করা, এবার ফন্ট ফ্যামীলি হিসেবে ব্যবহার করতে হবে।
ফন্ট ফ্যামীলি হিসেবে ব্যবহার করার জন্য আবার নিচে দেখুন আপনাকে ফন্ট ফ্যামীলি দেয়া হয়েছে
আপনি যে আইটেমে এই ফন্ট ব্যবহার করতে চান তার css ক্লাসে আপনি এই কোডটি ব্যবহার করুন, ডান পার্শ্বে দেখুন উদাহরণ দেয়া আছে।
আর যদি আপনার ফন্টটি গুগলে পাওয়া না যায় তাহলে আপনি দ্বিতীয় পদ্ধতি অবলম্বন করুন।
*********** ২. ডাউনলোড কৃত ফন্ট****************
প্রথমে আপনার কাঙ্খিত ফন্টটি সংগ্রহ করুন, যদি আপনার কাছে না থাকে তাহলে গুগলে সার্চ করে ডাউনলোড করে নিন, এবার ফন্টটি আপনাকে কনর্ভাট করতে হবে, কনর্ভাট করার জন্য আপনি এখানে ক্লিক করুন। এবারে সিলেক্ট ফাইলে ক্লিক করুন
আপনার ফন্টের লোকেশন চিনিয়ে দিন, এবারে get @font-face ক্লিক করুন।
এবারে ফন্টটি ব্যবহার করার জন্য নিচে কোড পাবেন
এই বিষয়টি নিয়ে আমাদের রাসেল ভাই- এর আগেই একটি পোষ্ট লিখেছে দেখতে পারেন এখানে
এই রকম আরো কিছু সাইটের লিংক দেয়া হল যে সকল সাইট ব্যবহার করে আপনি ফন্ট কনর্ভাট করতে পারবেন।
http://www.web-font-generator.com/
ভাল লাগলে কমেন্টে জানাতে ভুলবেনা…
ভুলে ভরা জীবনে ভুল হওয়াটা অসম্ভব কিছু নয়,যদি আমার লেখার মাঝে কোন ভুল-ত্রুটি থাকে ক্ষমার দৃষ্টিতে দেখবেন। ধন্যবাদ সবাই ভাল থাকবেন।
tag: google font, web-design, font-kit, font convert, ফন্ট কনভার্ট
কিছু বলার নাই এক কথাই 😀
অসংখ্য ধন্যবাদ, সুন্দর কমেন্ট করার জন্য।