কিভাবে ওয়ার্ডপ্রেসে ফন্ট পরিবর্তন করবেন — সম্পূর্ণ গাইড

ফন্টগুলি ওয়েব ডিজাইনের একটি প্রয়োজনীয়তা। শুধু ওয়ার্ডপ্রেসে নয়।

এমনকি একটি সাধারণ HTML সাইটের ফন্ট সেট থাকা প্রয়োজন। সৌভাগ্যক্রমে, ওয়ার্ডপ্রেস হল একটি পূর্ণ-স্ট্যাক কন্টেন্ট ম্যানেজমেন্ট সিস্টেম যেখানে প্রচুর কোডিং ইন্টিগ্রেটেড কোডিং পরিবর্তনগুলিকে সহজ করে তোলে।

নীচে আপনি ফন্ট, ওয়ার্ডপ্রেস, কীভাবে সেগুলি কাস্টমাইজ করবেন, সেগুলিকে আপনার স্টাইলশীটে কোড করবেন এবং বিশ্বব্যাপী ডেটা গোপনীয়তা প্রবিধানগুলির সাথে গতি এবং সম্মতির জন্য আপনার ফন্টগুলিকে অপ্টিমাইজ করবেন সেগুলি সম্পর্কে আপনার যা জানা দরকার তার সমস্ত কিছু কভার করে একটি নিবিড় টিউটোরিয়াল পাবেন৷



কিভাবে ওয়ার্ডপ্রেসে ফন্ট পরিবর্তন করতে হয়

ফন্টগুলি fonts.google.com থেকে আমদানি করা যেতে পারে বা আপনি যেকোনো Google ফন্ট ব্যবহার করতে একটি প্লাগইন যোগ করতে পারেন। বিকল্পভাবে, আপনি একটি ফন্ট ফাউন্ড্রি থেকে ফাইল ডাউনলোড করে, cPanel বা FTP এর মাধ্যমে আপলোড করে, তারপর ফন্ট লোড করার জন্য CSS সম্পাদনা করে যেকোনো ফন্ট ফাইল (WOFF, WOFF2, SVG, OTF, বা TTF) স্ব-হোস্ট করতে পারেন।

কিভাবে ওয়ার্ডপ্রেস কাস্টমাইজার ব্যবহার করে ফন্ট পরিবর্তন করবেন

WordPress.com-এ, বিনামূল্যের প্ল্যান ব্যবহারকারীরা থিম সেটিংস কাস্টমাইজ করে অথবা ব্লক এডিটরে গ্লোবাল ফিল্টার সেটিং ব্যবহার করে ফন্ট পরিবর্তন করতে পারেন। এটি কীভাবে করা হয় তা নির্ভর করে আপনি যে থিমটি ব্যবহার করছেন তার উপর।

CSS কাস্টমাইজেশন অর্থপ্রদানের পরিকল্পনা বা স্ব-হোস্টেড ওয়ার্ডপ্রেস সাইটের জন্য সংরক্ষিত।

ওয়ার্ডপ্রেস গ্লোবাল ফিল্টার ব্যবহার করার জন্য কিছু থিম তৈরি করা হয়েছে। অন্যদের কাস্টম ফন্টগুলি থিমের মধ্যে প্রাক-বান্ডিল রয়েছে৷

আপনার থিমের জন্য কোন পদ্ধতি কাজ করে তা খুঁজে বের করতে, আপনার থিম কাস্টমাইজেশন বিকল্পগুলিতে যান।

Appearance > Customize > Fonts-এ ক্লিক করুন।

ফন্ট কাস্টমাইজেশন বিকল্পে ক্লিক করলে একটি বার্তা দেখায় যা পড়ে

'আপনি গ্লোবাল স্টাইল ব্যবহার করে আপনার ফন্ট পরিবর্তন করতে পারেন, যা ব্লক এডিটরে পাওয়া যাবে',

এর মানে আপনাকে একটি পোস্ট বা পৃষ্ঠা তৈরি করতে হবে, তারপর ব্লক সম্পাদক গ্লোবাল সেটিংসের মধ্যে থেকে ফন্টগুলি পরিবর্তন করতে হবে।

যে থিমগুলিতে একটি ফন্ট ফোল্ডার অন্তর্ভুক্ত রয়েছে সেগুলিতে ফন্ট পরিবর্তন করার বিকল্প থাকবে।

যেগুলি নেই, তাদের ফন্ট বা টাইপোগ্রাফি বিকল্পগুলি পরিবর্তন করার জন্য থাকবে না। এটা এখনও করা যেতে পারে. শুধু কয়েক ক্লিকে নয়।

টোয়েন্টি টোয়েন্টি ওয়ান থিম হল একটি ওয়ার্ডপ্রেস থিমের উদাহরণ যেখানে কোনো অতিরিক্ত ফন্ট অন্তর্ভুক্ত নেই। এটি ব্লক সম্পাদকের সাথে সামঞ্জস্যপূর্ণ হওয়ার জন্য ডিজাইন করা হয়েছে যেখানে নতুন থিমগুলিতে ফন্টগুলি পরিবর্তন করা যায়৷

যদি আপনার থিম কাস্টমাইজার কোনো ফন্ট এবং মাপ বিভাগ বা টাইপোগ্রাফি সেটিংস না দেখায়, তাহলে ব্লক এডিটরে গ্লোবাল স্টাইল ব্যবহার করে দেখুন, কিন্তু আপনার থিমকে এটি সমর্থন করতে হবে।

পুরানো থিম বা ক্লাসিক এডিটর ইনস্টল সহ ওয়ার্ডপ্রেস চালানোর জন্য একটি সমাধান ব্যবহার করতে হবে, যার সবগুলোই সোজা নয়।

গ্লোবাল স্টাইল ফিল্টার দিয়ে কীভাবে ফন্ট পরিবর্তন করবেন

গ্লোবাল স্টাইল ফিল্টার হল ব্লক এডিটরের অংশ। সাইট-ব্যাপী ফন্ট পরিবর্তন করতে, একটি নতুন পোস্ট বা পৃষ্ঠা তৈরি করুন।

ওয়ার্ডপ্রেস সম্পাদকের উপরের ডানদিকে, দুটি অক্ষর A এর সাথে একটি কালো আইকন রয়েছে - একটি বড় হাতের, অন্যটি ছোট হাতের - পাশাপাশি।

এটিতে ক্লিক করুন এবং ডান নেভিগেশন ফলকটি আপনি প্রয়োগ করতে পারেন এমন ফন্টের একটি পরিসর দেখায়।

এখানে ফন্ট পরিবর্তন করা টেক্সট ধারণকারী সমস্ত ব্লকে পরিবর্তন প্রযোজ্য।

ক্লাসিক এডিটরে ফন্ট কিভাবে পরিবর্তন করবেন

গ্লোবাল স্টাইলার শুধুমাত্র তখনই পাওয়া যায় যখন আপনি ব্লক এডিটর ব্যবহার করেন।

আপনার যদি ক্লাসিক এডিটর প্লাগইন ইনস্টল করা থাকে, আপনি হয় একটি অতিরিক্ত প্লাগইন ইনস্টল করতে পারেন বা ওয়ার্ডপ্রেসে ম্যানুয়ালি ফন্ট কীভাবে পরিবর্তন করবেন তা শিখতে নীচে পড়া চালিয়ে যেতে পারেন।

আপনার থিম কাস্টমাইজার দিয়ে শুরু করুন। বেশিরভাগ WP থিমের একটি ফন্ট ফোল্ডার থাকে।

গতির জন্য, একটি টাইপোগ্রাফি ফন্ট প্লাগইন ইনস্টল করা আপনার টাইপ ফন্ট এবং শিরোনামগুলি কাস্টমাইজ করার দ্রুত সমাধান।

ফন্ট টাইপোগ্রাফি পরিবর্তন করতে বিনামূল্যে ওয়ার্ডপ্রেস প্লাগইন

একটি প্লাগইন ব্যবহার করা ওয়ার্ডপ্রেসে ফন্ট পরিবর্তন করার সবচেয়ে সহজ এবং দ্রুততম পদ্ধতি। পৃষ্ঠা নির্মাতা প্লাগইনগুলির বেশিরভাগের ইতিমধ্যেই কাস্টম ফন্ট রয়েছে৷ এইগুলি Google ফন্টের সাথে যুক্ত কারণ এটি একমাত্র ফন্ট প্রদানকারী যেটি সম্পূর্ণ বিনামূল্যে ব্যবহার করা যায়, এমনকি বাণিজ্যিক সাইটেও।

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

নীচে 3টি সর্বাধিক জনপ্রিয় ওয়ার্ডপ্রেস টাইপোগ্রাফি প্লাগইন রয়েছে৷

অ্যাডভান্সড এডিটর টুল প্লাগইন

আপনার ওয়ার্ডপ্রেস ড্যাশবোর্ডের বাম সাইডবারে প্লাগইন মেনুতে যান, প্লাগইন > নতুন যোগ করুন ক্লিক করুন।

টাইপ করুন ' অ্যাডভান্সড এডিটর টুলস ' অনুসন্ধান বারে।

একবার ইনস্টল এবং সক্রিয় হয়ে গেলে, আপনার WP সম্পাদক টুলবারে অতিরিক্ত সরঞ্জাম যোগ করা হয়। একটি ভিন্ন ফন্ট নির্বাচন করতে টুলবারের বাম দিকে ড্রপডাউন মেনু নির্বাচন করুন।


WP টাইপোগ্রাফি প্লাগইন

এই প্লাগইনটি আপনাকে আপনার ব্যবহৃত ফন্ট সেটগুলির আরও বেশি ব্যবহার করতে সহায়তা করে। এটি আপনার HTML-এ পরিবর্তন করে এবং আপনার স্টাইলিংকে সামঞ্জস্যপূর্ণ এবং সঠিক রাখতে সাহায্য করে।

এটি ফন্ট যোগ করে না। তবুও, এটির কিছু কার্যকারিতা থাকতে পারে যা আপনাকে আপনার পছন্দ অনুসারে আপনার সামগ্রীকে স্টাইল করতে সহায়তা করে।

খাবারের রেসিপি প্রকাশকারী সাইটগুলিতে বা গণিতের হিসাব কভার করে এমন DIY সাইটগুলিতে এটি কার্যকর হওয়ার সম্ভাবনা বেশি।

এটি ইনস্টল করতে, প্লাগইনগুলিতে যান > নতুন যোগ করুন এবং অনুসন্ধান করুন৷ WP টাইপোগ্রাফি .

ইনস্টল এবং সক্রিয় ক্লিক করুন.

একবার ইনস্টল এবং সক্রিয় হয়ে গেলে, আপনার টাইপোগ্রাফিতে বিভিন্ন পরিবর্তন রয়েছে যা সেটিংস পৃষ্ঠায় স্বয়ংক্রিয় হতে পারে। প্রতিটি সেটিং এর একটি ব্যাখ্যা আছে যখন আপনি এটি সক্ষম করবেন তখন ঘটবে৷

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

আপনার সেট করা ফন্টটিতে যদি একটি বিভাগ অক্ষর থাকে তবে এই প্লাগইনটি বিপরীত করে।

রেসিপি সাইটগুলিতে উদাহরণস্বরূপ 1  1/2 1 হিসাবে ভাল দেখায় 1 / দুই

HTML-এ, আপনাকে এইচটিএমএল (অথবা আপনার টুলবারে বোতাম) সুপারস্ক্রিপ্ট এবং সাবস্ক্রিপ্ট ব্যবহার করে এটি প্রয়োগ করতে হবে।

<sup>1</sup>/<sub>2.&nbsp;</sub>

এবং এটি সুপারস্ক্রিপ্টে TM এর মতো রেজিস্ট্রেশন চিহ্ন/চিহ্নগুলি ফর্ম্যাট করা এবং © পাওয়ার জন্য ALT + 0169 এর শর্টকোড পদ্ধতির পরিবর্তে (c) ব্যবহার করে কপিরাইট চিহ্ন সন্নিবেশ করা সহজ করে তোলে।

একটি নিবন্ধিত প্রতীকের জন্য এটি (r) ব্যবহার করে। এই প্লাগইন ছাড়া, কোড হল ALT + 0174 পেতে ®।

আপনার বিষয়বস্তু বিন্যাস করার জন্য এটি আপনাকে বিধবা প্রতিরোধ করার ক্ষমতা দেয়।

এটি যখন একটি পৃথক লাইনে শুধুমাত্র একটি শব্দ উপস্থিত হয়।

যখন একটি একক শব্দ তার নিজস্ব একটি লাইনে পড়ে তখন আপনি প্লাগইনটি সেট আপ করতে পারেন যাতে পূর্ববর্তী লাইনের শেষ কয়েকটি শব্দ টানতে পারে, একটি একক শব্দের সাথে লাইনগুলিকে প্রদর্শন করা থেকে বাধা দেয়। আপনি মোড়ানো ফাংশন ব্যবহার করে দীর্ঘ URL এর সাথে একই কাজ করতে পারেন।

সহজ গুগল ফন্ট

ইজি গুগল ফন্ট হল ওয়ার্ডপ্রেসে সবচেয়ে বেশি ব্যবহৃত টাইপোগ্রাফি প্লাগইন।

এটি ইনস্টল করতে, প্লাগইনস > নতুন যোগ করুন এবং ইনস্টল করুন সহজ গুগল ফন্ট প্লাগ লাগানো.

একবার ইনস্টল করার পরে, আপনাকে Google থেকে একটি API কী ধরতে হবে। এই জন্য, আপনার একটি Google অ্যাকাউন্ট প্রয়োজন.

https://developers.google.com/fonts/docs/developer_api. -এ যান;

'একটি নতুন প্রকল্প তৈরি করুন' নির্বাচন করুন ('কী পান' বোতামটি খুঁজতে পৃষ্ঠাটি নীচে স্ক্রোল করুন) তারপর একটি নাম টাইপ করুন৷

আপনি এখানে যে নামটি ব্যবহার করেন তা আপনার Google ক্লাউড কনসোলে প্রদর্শিত হবে যেখানে আপনি আপনার Google অ্যাকাউন্টের জন্য আপনার সমস্ত API কীগুলি পরিচালনা করতে পারেন৷

'পরবর্তী' ক্লিক করুন, তারপর আপনার ক্লিপবোর্ডে আপনার API কী অনুলিপি করুন।

আপনার ওয়ার্ডপ্রেস ড্যাশবোর্ডে ফিরে, বাম পাশের মেনুতে, সেটিংস > সহজ গুগল ফন্টে যান, প্লাগইনের জন্য উপরের নেভি মেনুতে 'সেটিংস' নির্বাচন করুন, আপনার API কী পেস্ট করুন, তারপর সংরক্ষণ বোতামে ক্লিক করুন।

একবার ইন্সটল করলে, আপনার WP কাস্টমাইজারে একটি নতুন 'টাইপোগ্রাফি' বিভাগ যোগ করা হয়। কাস্টমাইজার লোড করুন তারপর আপনি fonts.google.com এ উপলব্ধ যেকোন ফন্ট ব্যবহার করতে পারেন।

বডি ফন্টটি আপনার সাইটের মূল বিষয়বস্তুর জন্য ব্যবহৃত হয় যা অনুচ্ছেদ, সাইডবার টেক্সট এবং নেভিগেশন মেনু আইটেমের পাঠ্যের জন্য।

হেডিং ফন্ট হল হেডিং ট্যাগ H1 থেকে H6 পর্যন্ত এবং প্রতিটি আলাদা ফন্ট হতে পারে।

সহজ গুগল ফন্টের সাথে সরলতার জন্য ট্রেডঅফ হল গতি

প্রতিটি অনন্য ভিজিটর আপনার ওয়েবপৃষ্ঠা লোড করার জন্য, আপনার সাইটে প্রয়োগ করার জন্য আপনি যে ফন্টটি সেট করেছেন তা টানতে আপনার ওয়েবসাইট সার্ভারকে Google ওয়েব সার্ভারের সাথে সংযোগ করতে হবে।

এটি আপনার ওয়েবসাইটের গতি কিছুটা কমিয়ে দিতে পারে।

আপনি যখন Google Fonts API-এর মাধ্যমে সংযোগ করেন তখন আপনার সাইটটি লোড করার প্রক্রিয়াটি হল প্রথমে এটি আপনার ওয়েবপৃষ্ঠার HTML পড়ে, তারপর স্টাইলশীট আনতে fonts.googleapis.com/css এর সাথে সংযোগ করে, তারপর ফন্টটি আনতে fonts.gstatic.com-এর সাথে সংযোগ করে আপনার সাইটে লোড.

যে প্রতি ফন্ট হয়. তাই বেশ অনেক.

একটি 3-পদক্ষেপ প্রক্রিয়া যা আপনার পৃষ্ঠা লোডের সময় প্রায় এক সেকেন্ড যোগ করতে পারে। এটি খুব বেশি মনে নাও হতে পারে তবে অন্যান্য রেন্ডার-ব্লকিং রিসোর্সে যোগ করা হয়, এটি জমা হয়। একজন দর্শক এক সেকেন্ডেরও কম সময়ে আপনার পৃষ্ঠা থেকে দূরে ক্লিক করতে পারেন।

প্লাগইনটি Google ফন্টগুলি ব্যবহার করা সহজ করে তোলে, তবে, এটি কর্মক্ষমতার জন্য অপ্টিমাইজ করা প্রয়োজন।

আপনি ওয়ার্ডপ্রেসের জন্য ওএমজিএফ প্লাগইন দিয়ে এটি করতে পারেন, যা এমন কিছু যা সম্ভবত আপনার প্রয়োজন হবে।

এর কারণ হল এই দুটি প্লাগইন জোড়া না দিয়েই, ইজি গুগল ফন্ট নিজেরাই ব্যবহার করা ডেটা গোপনীয়তা বিধির লঙ্ঘন করে।

কেন যে ব্যাপার

ব্যবহারকারীর ডিভাইসে রাখা কুকিজ ব্যবহার সংক্রান্ত বিভিন্ন দেশে ডেটা গোপনীয়তা বিধি রয়েছে।

ইউরোপে বিশ্বের সবচেয়ে কঠোর ডেটা সুরক্ষা আইন রয়েছে। GDPR - সাধারণ ডেটা সুরক্ষা প্রবিধান। এটি ইউরোপীয় ইউনিয়নের (ইইউ) মধ্যে যেকোনো দেশে অ্যাক্সেস করা যায় এমন সমস্ত সাইটের ক্ষেত্রে প্রযোজ্য।

এটির জন্য সুস্পষ্ট কুকি সম্মতি বিজ্ঞপ্তিগুলি দেখানো প্রয়োজন এবং সাইটে প্রকাশিত একটি কুকি নীতি যা আপনার ওয়েবসাইট কুকি ব্যবহারের মাধ্যমে সংগ্রহ করে এমন ডেটা ব্যবহারকারীদের অবহিত করে৷

এর মধ্যে তৃতীয় পক্ষের কুকিজ রয়েছে, যা fonts.googleapis.com বা fonts.gstatic.com ভিজিটর সিএসএস রেকর্ড এবং আইপি ঠিকানা লগ সংরক্ষণ করতে ব্যবহার করে।

ক্যালিফোর্নিয়া কনজিউমার প্রাইভেসি অ্যাক্ট (CCPA) জিডিপিআর-এর মতোই, শুধুমাত্র এটি একইভাবে নিয়ন্ত্রিত নয়। ইউরোপে, ইউরোপীয় ব্যবসার জন্য অ-সম্মতির জন্য জরিমানা আছে।

CCPA-এর উদ্দেশ্য হল ক্যালিফোর্নিয়ার বাসিন্দাদের তথ্য কীভাবে ব্যবহার করা হচ্ছে সে সম্পর্কে স্বচ্ছতা বৃদ্ধি করা।

টেকনিক্যালি, CCPA-এর জন্য শুধুমাত্র ব্যবহারকারীদের জানানো প্রয়োজন যে কোনও ওয়েবসাইট কুকিজ ব্যবহার করে এবং কেন। একটি অপ্ট-আউট সম্মতি বিকল্প বাধ্যতামূলক নয়৷

ইউরোপে, ব্যবহারকারীদের অবশ্যই তাদের ডিভাইসে কুকি সংরক্ষণ করা থেকে অপ্ট আউট করার বিকল্প দিতে হবে।

ব্রাজিল 2020 সালের সেপ্টেম্বরে LGPD, (Lei Geral de Proteçao de Dados) প্রয়োগ করেছে যা অনেকটা GDPR বিয়োগের মতো অ-সম্মতির জন্য কঠোর জরিমানা। গুরুতর লঙ্ঘনের জন্য কঠোর শাস্তি দেওয়া হবে।

গুগল ফন্ট সেটিং কুকিজ এর গুরুত্বপূর্ণ অংশ

একটি আইপি অ্যাড্রেস 'পার্সোনাল আইডেন্টিফাইয়েবল ইনফরমেশন' (PII) হিসাবে স্বীকৃত, তাই কুকি Google আপনার সাইটের মাধ্যমে ব্যবহারকারীদের ডিভাইসে রাখে, আপনার ওয়েবসাইটকে GDPR, CCPA এবং LGPD এর অধীন করে। আপনি যদি একটি 'কুকি সম্মতি' প্লাগইন ব্যবহার না করেন, তাহলে আপনাকে মেনে চলার জন্য Google ফন্টকে স্ব-হোস্ট করা উচিত।

কীভাবে Google ফন্টগুলিকে সমস্ত ডেটা গোপনীয়তা প্রবিধানের সাথে সঙ্গতিপূর্ণ করা যায়

আপনার নিজের সার্ভারে গুগল ফন্ট স্ব-হোস্ট করার সবচেয়ে সহজ পদ্ধতি হল ওয়ার্ডপ্রেসের জন্য OMGF প্লাগইন ব্যবহার করা। এটি Google Font API-এর প্রয়োজনীয়তা দূর করে।

এটি করার দুটি পদ্ধতি রয়েছে। ম্যানুয়ালি বা স্বয়ংক্রিয়ভাবে। কিন্তু স্বয়ংক্রিয় মোডের জন্য আপনাকে একটি প্রো লাইসেন্স কিনতে হবে। আপনি যে সাইটে এটি ব্যবহার করেন তার সংখ্যা অনুসারে দাম পরিবর্তিত হয়।

ম্যানুয়াল পদ্ধতির মানে হল যে আপনাকে Google Fonts API-এর সাথে সংযোগ করতে প্লাগইন ব্যবহার করতে হবে, আপনি যে ফন্টগুলি ব্যবহার করতে চান তার অনুলিপি (একটি ক্যাশে সংস্করণ) ডাউনলোড করতে হবে, আপনার প্রয়োজনীয় ফাইলের ধরনগুলিতে, তারপর ফন্টগুলি লোড করার জন্য একটি স্টাইলশীট তৈরি করতে হবে। Googles এর পরিবর্তে আপনার সার্ভার থেকে।

OMGF প্লাগইন fonts.google.com থেকে ফন্ট ফাইল কপি করে এবং আপনার সার্ভারে রাখে। এটি API ব্যবহার করে আপনার ব্যবহারকারীদের Google সার্ভারের সাথে সংযুক্ত করে না। এটি আপনার ওয়ার্ডপ্রেস ইনস্টলে ফাইলগুলি অনুলিপি করার শর্টকাট অংশ।

এটি ছাড়া, আপনাকে সবকিছু ম্যানুয়ালি করতে হবে। এটি গুগল ফন্টের জন্য স্বয়ংক্রিয়ভাবে স্ব-হোস্টিং করার বিনামূল্যের পদ্ধতির মতো।

এটি করা কতটা সহজ তা এখানে।

OMGF প্লাগইন ইনস্টল করুন

আপনার ওয়ার্ডপ্রেস ড্যাশবোর্ড থেকে, প্লাগইনস > নতুন যোগ করুন এ যান।

OMGF-এর জন্য কীওয়ার্ড দ্বারা অনুসন্ধান করুন - 'এর সংক্ষিপ্ত রূপ আমার গুগল ফন্ট অপ্টিমাইজ করুন '

'এখনই ইনস্টল করুন' বোতামে ক্লিক করুন, তারপরে 'সক্রিয় করুন' এ ক্লিক করুন।

এটি হয়ে গেলে, 'অপ্টিমাইজ গুগল ফন্ট' লেবেলযুক্ত আপনার 'সেটিংস' মেনুতে একটি নতুন মেনু আইটেম যোগ করা হবে।

এটিতে ক্লিক করুন এবং সাধারণ সেটিংস পৃষ্ঠাটি লোড হবে।

এটি ভীতিজনক দেখাতে পারে, তবে, ডিফল্ট সেটিংস সাধারণত যথেষ্ট। আপনাকে যা করতে হবে তা হল কনফিগারেশন সেটিংস পরীক্ষা করুন, তারপর 'সংরক্ষণ এবং অপ্টিমাইজ' এ ক্লিক করুন।

ম্যানুয়াল পদ্ধতির জন্য, আপনি অনেক কিছু করতে পারেন না।

প্রো সংস্করণে অনেক বেশি অপ্টিমাইজেশন বৈশিষ্ট্য রয়েছে। বিনামূল্যে সংস্করণ ব্যবহার করে আপনার সার্ভারে একটি ফন্ট ক্যাশে ফোল্ডার তৈরি হয়। সেখানেই আপনার ফাইল সংরক্ষণ করা হবে। (/uploads/omgf)।

আপনি যদি একটি ভিন্ন ফোল্ডার চান তবে 'উন্নত সেটিংস' এ ক্লিক করুন তারপর আপনার সার্ভারে ইতিমধ্যেই যে ফোল্ডার রয়েছে তাতে আপনার কাস্টম 'ফন্ট ক্যাশে ডিরেক্টরি' সেট করুন। আপনার থিমে কোনো ফন্ট ফোল্ডার না থাকলে একটি তৈরি করা হবে।

'গুগল ফন্ট প্রসেসিং' এর জন্য 'প্রতিস্থাপন' এর জন্য ডিফল্ট বিকল্পটি সেট করা আছে কিনা তা পরীক্ষা করতে 'ডিটেকশন সেটিংস' ট্যাবে ক্লিক করুন৷ যদি এটি 'রিমুভ' এ সেট করা থাকে, তাহলে আপনার সাইটটি সিস্টেম ফন্টে ফিরে যাবে।

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

WOFF এবং WOFF2 ফাইল প্রকারগুলি ডিফল্ট বিকল্প। EOT, TTF, এবং SVG ফাইলগুলি প্রিমিয়াম বৈশিষ্ট্য। ফন্ট ফাইলের ধরন এবং আপনার প্রয়োজনীয় প্রকারগুলি সম্পর্কে আরও জানতে পড়া চালিয়ে যান।

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

আপনি যখন 'সংরক্ষণ করুন এবং অপ্টিমাইজ করুন' এ ক্লিক করবেন তখন প্লাগইনটি আপনার সেট করা URL স্ক্যান করবে, Google সার্ভার থেকে প্রয়োজনীয় ফন্ট ফাইল আনবে এবং আপনার ওয়ার্ডপ্রেস থিমে প্রতিটি ফন্টের একটি ক্যাশে সংস্করণ যোগ করবে।

এই ক্যাশে ফন্টগুলি গুগলের পরিবর্তে আপনার সার্ভার থেকে লোড হবে। আপনার সাইটের যেকোনো সক্রিয় ফন্ট আপনার ফন্টগুলি কীভাবে পরিচালনা করবেন তার বিকল্পগুলির সাথে একই বিভাগে প্রাক-পপুলেট করা হবে।

উপরের স্ক্রিনশটে, শুধুমাত্র দুটি ফন্ট কপি করা হয়েছে। 'লাটো' এবং 'মনস্টাররাট'। থিমে সক্রিয় ফন্ট. অন্যান্য সমস্ত হাজার হাজার Google ফন্ট উপেক্ষা করা হয়েছে তাই আপনি সম্পূর্ণ লাইব্রেরি আমদানি করছেন না কারণ এটি সম্ভবত আপনার সার্ভার ব্যান্ডউইথকে ক্রাশ করবে।

এই উদাহরণে যে ফন্টগুলি আমদানি করা হচ্ছে তা থিম থেকে। একটি প্রিমিয়াম থিম হওয়া সত্ত্বেও, এটি Google Fonts Developer API ব্যবহার করছে। কাস্টম ফন্ট সহ অনেক থিমের সাথে এটি একই।

সুতরাং এমনকি সহজ Google ফন্ট প্লাগইন ছাড়া, থিমগুলি ডেটা গোপনীয়তার সাথে অনুগত হতে পারে না। যখন থিমগুলি Google ফন্টগুলি ব্যবহার করে, তখনও আপনার সম্মতি এবং গতির জন্য OMGF ব্যবহার করা উচিত।

API ব্যবহার করে থিমগুলির সাথে একটি গতির উদ্বেগের কারণ হল আপনি যদি একটি জনপ্রিয় থিম ব্যবহার করেন তবে Google সার্ভারগুলি অনুরোধগুলি পূরণ করতে ব্যর্থ হতে পারে বা অন্তত যতটা দ্রুত হতে পারে ততটা না।

FOUT সম্পর্কে আপনার যা জানা উচিত

FOUT এর অর্থ হল 'ফ্ল্যাশ অফ আনস্টাইলড টেক্সট'। ফন্টটি লোড হতে কিছু সময় নিলে এটি ঘটে। পৃষ্ঠাটি লোড হওয়ার সময় একটি সাদা পর্দা দেখানোর পরিবর্তে, ব্রাউজারগুলি ডিফল্ট ফন্ট লোড করে।

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

FOUT যাতে না ঘটে তার জন্য, আপনার CSS-এ একাধিক ফন্ট সেট করুন।

কিভাবে CSS দিয়ে ব্যাকআপ ফন্ট সেট করবেন

ওয়ার্ডপ্রেস সিএসএস কাস্টমাইজার হল যেখানে ফন্ট স্ট্যাক সেট করতে হয়। আপনি যত খুশি ব্যবহার করতে পারেন, কিন্তু সাধারণত, আপনার জেনেরিক ফলব্যাক ফন্ট আছে তা নিশ্চিত করতে চার থেকে দশটি ফন্টের নাম যথেষ্ট।

মনে রাখবেন যে আপনি আপনার CSS-এ যে ফন্ট অন্তর্ভুক্ত করবেন তা আপনার থিম ফন্ট ফোল্ডারে থাকতে হবে।

যদি তা না হয়, তাহলে ফন্টের URLটি থিম স্টাইলশীটে অন্তর্ভুক্ত করা উচিত @import ফাংশন ব্যবহার করে ফন্টটি ওয়েবে যেখানেই থাকুক না কেন।

আপনার কাছে যে ফন্টগুলিই থাকুক না কেন, আপনি আপনার CSS কাস্টমাইজারে একটি ফন্ট স্ট্যাক সেট করতে পারেন।

একটি ফন্ট স্ট্যাকের একটি উদাহরণ:

.body {
font-family: Impact, Haettenschweiler, “Franklin Gothic Bold”, Charcoal, “Helvetica Inserat”, “Bitstream Vera Sans Bold”, “Arial Black”, sans-serif;
}

সিএসএস-এ ফন্ট স্ট্যাকগুলি কীভাবে কোড করা হয় তার একটি ব্যাখ্যা

ফন্ট-ফ্যামিলি হ'ল ফন্টের নাম সেট করতে যা ব্যবহার করতে হয়। প্রতিটি থিমের জন্য, আপনি যে ক্লাসে ফন্ট প্রয়োগ করবেন তা ভিন্ন হবে। WP থিমের সাধারণ CSS ক্লাস হল প্রধান বিষয়বস্তু, বা

অথবা

আপনার CSS কাস্টমাইজারে, আপনি প্রথমে একটি পিরিয়ড সামনে রেখে ক্লাস সেট করবেন, তারপরে একটি কোঁকড়া বন্ধনী, তারপরে ফন্ট-ফ্যামিলি, তারপর একটি কোলন, তারপর ফন্টের নাম, একটি সেমি-কোলন দিয়ে শেষ হবে, তারপর CSS বন্ধ করবেন।

একক নামের ফন্টের উদ্ধৃতি চিহ্নের প্রয়োজন নেই। এক-শব্দের বেশি হরফগুলিকে দ্বিগুণ উদ্ধৃতি চিহ্নের মধ্যে স্থাপন করতে হবে যাতে ব্রাউজাররা জানতে পারে যে নামগুলি একত্রিত।

উদাহরণ হিসেবে, উদ্ধৃতি ছাড়া টাইমস নিউ রোমান স্থাপন করলে টাইমস ফন্ট লোড হবে কারণ এটি প্রথম শব্দটি লোড করে। 'টাইমস নিউ রোমান' এর চারপাশে উদ্ধৃতি চিহ্ন রাখুন, তারপর ব্রাউজার সঠিকটি লোড করবে।

প্রতিটি ফন্ট একটি কমা দ্বারা পৃথক করা হয়.

উপরে ব্যবহৃত স্ট্যাকের উদাহরণে, 8টি ফন্ট সেট করা হয়েছে। ব্রাউজার প্রথমে 'ইমপ্যাক্ট' ফন্ট লোড করার চেষ্টা করবে। যদি এটি ব্যর্থ হয় তবে এটি দ্বিতীয় ফন্টে (Haettenschweiler) প্রত্যাবর্তন করবে এবং ডান পর্যন্ত শেষ পর্যন্ত চালিয়ে যাবে।

যদি আপনার স্ট্যাকের শেষ ফন্টটি লোড করতে ব্যর্থ হয়, তাহলে এটি ব্রাউজার ডিফল্ট ফন্টে ফিরে আসে। ব্রাউজার ডিফল্ট ফন্ট লোড হওয়া প্রতিরোধ করার জন্য একটি শেষ ওয়েবসেফ পরিমাপ হিসাবে, স্ট্যাকের শেষ ফন্টটি সর্বদা একটি ওয়েব নিরাপদ ফন্ট হওয়া উচিত, যা জেনেরিক নাম।

5টি সবচেয়ে সাধারণ জেনেরিক ফন্ট পরিবার

  • সেরিফ,
  • ব্যতিত সেরিফ,
  • অভিশাপ
  • কল্পনা,
  • এবং মনোস্পেস।

উপরের জেনেরিক ফন্ট ফ্যামিলির সাথে আপনার ফন্ট স্ট্যাক শেষ করে, এটি আপনার ওয়েবসাইটের ডিজাইনে কঠোর পরিবর্তনগুলিকে বাধা দেয়, যেমন একটি অভিশাপ পরিবারে একটি ফন্ট থেকে একটি সেরিফ ফন্টে পরিবর্তন করা।

ওয়ার্ডপ্রেস কাস্টমাইজার বা আপনার স্টাইলশীটে ফলব্যাক ফন্ট সেট করা ব্রাউজারগুলিকে তাদের নিজস্ব ডিফল্ট ফন্টগুলির সাথে আপনার থিমকে ওভাররাইড করা বন্ধ করার একটি প্রতিরোধমূলক ব্যবস্থা। বেশিরভাগ ব্রাউজারের ডিফল্ট হল হেলভেটিকা ​​বা এরিয়াল।

ফন্ট ফাইল প্রকার সম্পর্কে

ফন্টের জন্য বিভিন্ন ধরনের ফাইল আছে, কিন্তু বাস্তবে, আপনার শুধুমাত্র একটি প্রয়োজন। WOFF2. ওয়েব ওপেন ফন্ট ফরম্যাট। এটি সমর্থিত সময়ের 98% অনুমান করা হয়। অন্য 2% সময় এটি সমর্থিত নয়, ফলব্যাক ফন্ট ব্যবহার করা হবে।

আপনি যদি চান যে আপনার ওয়েব ডিজাইন যেকোনো ওয়েব ব্রাউজারে সম্পূর্ণ স্থিতিশীল হোক, একাধিক ফরম্যাট ব্যবহার করুন।

WOFF এবং WOFF2 ফাইলগুলি বেশিরভাগ ওয়েব ব্রাউজার দ্বারা সমর্থিত। SVG (Scalable Vector Graphics), .OTF (OpenType Fonts), .TTF (TrueType Fonts) এবং .EOF (Embedded OpenType Fonts)ও ওয়ার্ডপ্রেসে ব্যবহার করা যেতে পারে।

যেখানে ফন্ট ডাউনলোড করতে হবে

ফন্ট ডাউনলোড করার জন্য সবচেয়ে বেশি ব্যবহৃত প্ল্যাটফর্মগুলি হল:

  • গুগল ফন্ট
  • অ্যাডোব ফন্ট
  • হরফ কাঠবিড়ালি

Google ফন্টগুলি আরও ব্যাপকভাবে ব্যবহৃত হয়, প্রধানত কারণ সমস্ত লাইসেন্স বিনামূল্যে। Adobe-এর একটি সাবস্ক্রিপশন প্ল্যান প্রয়োজন, এবং ফন্ট স্কুইরেলের বিনামূল্যে এবং প্রিমিয়াম ফন্ট রয়েছে, তবে বিভিন্ন শেষ ব্যবহারকারী লাইসেন্স চুক্তি (EULAs) সহ।

উপরন্তু, আপনি ফন্ট ফাউন্ড্রিগুলির তালিকার জন্য অনলাইনে অনুসন্ধান করতে পারেন। ফন্ট স্কুইরেল একটি ফাউন্ড্রি নয়, বরং অন্যান্য ফাউন্ড্রিগুলির আউটবাউন্ড লিঙ্ক সহ একটি ডিরেক্টরি যেখানে আপনি ফন্টগুলি ডাউনলোড করতে পারেন বা সেগুলি ডাউনলোড করার জন্য প্রয়োজনীয় লাইসেন্স কিনতে পারেন

ওয়ার্ডপ্রেসে স্থানীয়ভাবে ফন্টগুলি কীভাবে স্ব-হোস্ট করবেন

আপনার প্রয়োজনীয় ফাইলের ধরনগুলিতে আপনি যে ফন্টগুলি ব্যবহার করতে চান সেগুলি পেয়ে গেলে, পরবর্তী ধাপ হল সেগুলিকে ওয়ার্ডপ্রেসে আপলোড করা৷

FTP ব্যবহার করে অথবা আপনার হোস্টিং প্রদানকারীর cPanel এর মাধ্যমে এটি করুন। (yoursite.com:2083 < আপনার সাইটের ওয়েব সার্ভারের দ্রুত রুট)।

আপনি কাস্টম ফন্ট যোগ করতে চান থিম যান.

ফাইল ম্যানেজার > WP বিষয়বস্তু > থিম > ফন্ট যোগ করতে থিম নির্বাচন করুন ক্লিক করুন

উপরের নেভিগেশন বারে '+ ফোল্ডার' লেবেলে ক্লিক করুন। ফোল্ডারটির নাম দিন 'ফন্টস'।

আপনার ডাউনলোড করা ফোল্ডার থেকে আপনার সমস্ত ফন্ট আনজিপ করুন, তারপর নতুন 'ফন্ট' ফোল্ডারে আপলোড করুন৷

তারপরে আপনার ওয়ার্ডপ্রেস ড্যাশবোর্ডে ফিরে যান, 'থিম এডিটর' এ যান এবং নিম্নলিখিত কোডটি সন্নিবেশ করুন

@font-face {
font-family: Caveat Bold;
src: url(https://yoursite.com/wp-content/themes/twentynineteen/fonts/Caveat-Bold.ttf);
font-weight: normal;

ফন্ট ফোল্ডারে আপনি যে ফন্ট আপলোড করেছেন তার নামের সাথে ফন্ট-ফ্যামিলি নামটি প্রতিস্থাপন করুন এবং আপনার সাইটে ফাইলটি খুঁজতে ব্যবহৃত URLটি প্রতিস্থাপন করুন।

এটি হয়ে গেলে, আপনি যোগ করে আপনার CSS কাস্টমাইজারে ফন্ট পরিবর্তন করতে পারেন

.page-title {
font-family: “Caveat Bold”;
}

'পৃষ্ঠা-শিরোনাম' ক্লাস ভিন্ন হতে পারে। CSS ক্লাস খুঁজে পেতে, আপনার পৃষ্ঠার যে অংশে আপনি পরিবর্তন করতে চান তার উপর ডান-ক্লিক করে আপনার ব্রাউজার পরিদর্শক ব্যবহার করুন তারপর 'পরিদর্শন করুন' এ ক্লিক করুন। প্রতিটি উপাদানের জন্য CSS ক্লাস দেখানো হবে।

আপনি যতগুলো ফন্ট চান আপলোড প্রক্রিয়াটি পুনরাবৃত্তি করুন, তারপর ফন্ট স্ট্যাক সেট করতে আগে ব্যাখ্যা করা CSS ফন্ট স্ট্যাকিং কোডগুলি ব্যবহার করুন।

একবার আপনার সার্ভারে ফন্টগুলি হয়ে গেলে, আপনি CSS কাস্টমাইজার ব্যবহার করে যেকোনো উপাদানে একটি কাস্টম ফন্ট প্রয়োগ করতে পারেন, যেমন পৃষ্ঠার শিরোনাম, অনুচ্ছেদ, ব্লককোট, শিরোনাম বা শুধুমাত্র আপনার সাইটের শিরোনাম।

মনে রাখবেন যে আপনি আপনার সার্ভারে যত বেশি ফন্ট আপলোড করবেন, এটি তত বেশি সংস্থান ব্যবহার করবে এবং এটি আপনার সাইটকে ধীর করে দিতে পারে।

বিশেষ করে যদি আপনি SVG ফাইল ব্যবহার করেন, যেমন অভিনব গ্রাফিক ডিজাইন ফন্ট। আপনার সাইটের শিরোনাম পরিবর্তন করার জন্য একটি SVG ফন্ট ঠিক আছে, কিন্তু আপনি যদি আপনার সমস্ত শিরোনাম ট্যাগ জুড়ে এটি পুনরাবৃত্তি করেন তবে এটি সম্ভবত আপনার সাইটকে ধীর করে দেবে।

প্রিমিয়াম ওয়ার্ডপ্রেস থিম ব্যবহারকারী এবং ফন্ট

শেষ কিন্তু অন্তত নয়, আপনি যদি একটি প্রিমিয়াম ওয়ার্ডপ্রেস থিম ব্যবহার করেন, তাহলে সম্ভাবনা আপনি ইতিমধ্যেই কভার হয়ে গেছেন। ThemeForest (আমার ব্যক্তিগত পছন্দের) মত ওয়েবসাইট থেকে কেনা প্রিমিয়াম ওয়ার্ডপ্রেস টেমপ্লেটগুলি প্রায় সবসময়ই আগে থেকে ইনস্টল করা ফন্টের সাথে আসে।

এই থিমগুলিতে ফন্টগুলি পরিবর্তন করা সাধারণত খুব সহজ এবং আপনার পক্ষ থেকে কোনও অতিরিক্ত ইনস্টল করার প্রয়োজন হয় না৷ শুধু আপনার ওয়ার্ডপ্রেস ড্যাশবোর্ডের থিম সেটিংসে যান এবং ঠিক সেখানে ফন্টটি সামঞ্জস্য করুন (ফন্টগুলি সাধারণত 'টাইপোগ্রাফি' এর অধীনে পাওয়া যায়।