প্রতিটি রুটে ব্রাউজারকে যে ফন্ট কাজ করতে বলা হয় তা কমান
হোম পেজ, কনভার্জন পেজ, লগইন অবস্থানসমূহ, এবং বিভিন্ন ডিজাইন সিস্টেম ব্যবহার করা টেমপ্লেটগুলিতে কোল্ড‑ক্যাশ ফন্ট অনুরোধগুলির ইনভেন্টরি নিন। ফ্যামিলি, ওয়েট, স্টাইল, ফাইল, উত্স, ট্রান্সফার সাইজ, এবং সিলেক্টর নোট করুন। একটি ঘোষিত @font-face নিয়ম নিজেই ডাউনলোড ট্রিগার করে না; সাধারণত ব্রাউজার তখনই একটি ফেইস ফেচ করে যখন বর্তমান লেআউট সেটি ব্যবহার করে। তাই অনবহিত গ্লোবাল ওয়েট এবং স্টাইল প্রথমেই মুছে ফেলার মতো দরকারী।
যেখানে কাস্টম টাইপ প্রকৃত ব্র্যান্ড মান বহন করে সেগুলোতে কাস্টম ব্যবহার করুন—সাধারণত ডিসপ্লে হেডিংগুলিতে—আর ডিজাইন অনুমতি দিলে সাধারণ বডি কপির জন্য সিস্টেম স্ট্যাক বিবেচনা করুন। সবসময় ধরে নেবেন না যে ভ্যারিয়েবল ফন্ট সবসময় ছোট: এটি একাধিক স্ট্যাটিক ফাইল প্রতিস্থাপন করতে পারে কিন্তু একক স্ট্যাটিক ফেইসের তুলনায় বড়ও হতে পারে। প্রকৃত রুট দ্বারা অনুরোধকৃত কমপ্রেস্ড অ্যাসেটগুলো তুলনা করুন।
রুট‑লেভেলে পরীক্ষিত ব্যবহার না থাকা ফ্যামিলি, ওয়েট, ইটালিক্স, এবং আইকন ফন্ট অপসারণ করুন।
বিল্ড বদলানোর আগে লাইসেন্স ওয়েব ডেলিভারি, সাবসেটিং, এবং সেলফ‑হোস্টিং অনুমোদন করে কি না যাচাই করুন।
আবশ্যক ক্যারেক্টার বাদ না করে WOFF2 এবং সাবসেট ব্যবহার করুন
আধুনিক‑ব্রাউজারের বেসলাইন হিসেবে WOFF2 ব্যবহার শুরু করুন। W3C Recommendation অনুযায়ী WOFF2 উন্নত কম্প্রেশন এবং দ্রুত ডিকম্প্রেশন জন্য ডিজাইন করা একটি ওয়েব‑ফন্ট প্যাকেজ এবং এটি প্রধান ব্রাউজারগুলোতে বাস্তবায়িত। ডিজাইন করা না থাকলে শুধুমাত্র ডকুমেন্ট করা লেগেসি‑ব্রাউজারের প্রয়োজনের জন্যই অন্য ফরম্যাট রাখুন; অন্যথায় ভালভাবে ডিজাইন করা একটি ফলব্যাকই নিরাপদ সামঞ্জস্য পথ।
সাবসেট একটি ছোট ফাইল তৈরি করে যা নির্বাচিত গ্লিফ বা ক্যারেক্টার শেপ রাখে। unicode-range সাবসেটগুলোকে ক্যারেক্টার রেঞ্জের সাথে যুক্ত করতে পারে যাতে ব্রাউজার প্রাসঙ্গিক ফাইল বেছে নেয় যখন টেক্সট ম্যাচ করে। বাস্তব পেজ এবং আপনি যে ভাষাগুলো সমর্থন করেন সেগুলো থেকে সাবসেট তৈরি করুন—পুনঃচিহ্নিতকরণ, পাংচুয়েশন, মুদ্রা, নাম, আইনি টেক্সট, এবং ব্যবহারকারী-প্রবেশ করা স্ক্রিপ্ট সহ। অনুপস্থিত গ্লিফ correctness সমস্যা, এটি গ্রহণযোগ্য বাইট সেভিং নয়।
শুধু ইংরেজি ডিজাইন স্যাম্পল নয়, প্রতিনিধিত্বমূলক লোকালাইজড পেজ এবং ফর্ম ইনপুট পরীক্ষা করুন।
প্রতিটি সাবসেটের unicode-range এবং ওয়েট/স্টাইল রেঞ্জ প্রয়োগকৃত ফাইলে মিলছে তা নিশ্চিত করুন।
ফলব্যাক এবং font-display নীতি একসাথে ডিজাইন করুন
ফলব্যাক ফন্ট হল কাস্টম ফেইস প্রস্তুত না থাকলে ব্যবহারকারী যা দেখে। অনুরূপ অনুপাতের জন্য এটি নির্বাচন করুন, তারপর বাস্তব হেডিং, মাল্টি‑লাইন বোতাম, নেভিগেশন, টেবিল, ফর্ম, এবং দীর্ঘ লোকালাইজড স্ট্রিং তুলনা করুন। ভিন্ন প্রস্থ মোড়ানোকে বদলে দিতে পারে; ভিন্ন ascent, descent, বা line‑gap ব্লক উচ্চতা পরিবর্তন করে। উভয়ই পেজে ইতিমধ্যেই দৃশ্যমান কন্টেন্ট সরিয়ে দিতে পারে।
font-display নির্ধারণ করে কিভাবে রেন্ডার করা হবে যখন একটি ফেইস অনুপলব্ধ। optional‑এর ব্লক পিরিয়ড অত্যন্ত ছোট এবং কোনো swap পিরিয়ড নেই, তাই প্রথম ভিজিটে স্থিতিশীল ফলব্যাক পছন্দযোগ্য হলে এটি বডি টেক্সটের উপযোগী হতে পারে। swap তাড়াতাড়ি ফলব্যাক দেখায় এবং পরে ওয়েব ফন্ট প্রয়োগ করতে পারে, কিন্তু কেবল সেখানে ব্যবহার করুন যেখানে দেরিতে প্রতিস্থাপন একটি বিঘ্নকর রিফ্লো সৃষ্টি করবে না। Block বা fallback‑কে পরীক্ষিত ডিজাইনের কারণ হিসেবে ব্যবহার করা উচিত, গ্লোবাল ডিফল্ট হিসেবে নয়। CSS size-adjust ফলব্যাকের মেট্রিক টিউন করতে সাহায্য করতে পারে, কিন্তু প্রতিটি সমর্থিত স্ক্রিপ্ট এবং ভিউপোর্ট ভিজ্যুয়ালি যাচাই করুন।
পেমেন্ট, রিকভারি, অ্যাকাউন্ট, নিরাপত্তা, বা নেভিগেশন টেক্সটকে দেরি হওয়া কাস্টম ফন্টের উপর নির্ভরশীল করবেন না।
ফলব্যাক একটি অক্ষর ভুল অর্থ দিতে পারে; ইন্টারফেস সিম্বলগুলোর জন্য সাধারণত SVG আইকন নিরাপদ।
ডিসকভারি উন্নত করুন, কিন্তু প্রিলোড সীমিত রাখুন এবং ডেটা প্রবাহ মূল্যায়ন করুন
শুধুমাত্র এক্সটার্নাল স্টাইলশীটে ঘোষিত একটি ফেইস সেই স্টাইলশীট ডাউনলোড ও পার্স হওয়ার পরে আবিষ্কৃত হতে পারে। রক্ষণযোগ্য প্রথমিক CSS একটি প্রয়োজনীয় ঘোষণা আগেই প্রকাশ করতে পারে; ফন্ট বাইনারি ইনলাইন করবেন না, যা ডকুমেন্ট বড় করে। থার্ড‑পার্টি উত্সের জন্য preconnect তাত্ক্ষণিকভাবে সংযোগ প্রতিষ্ঠা করতে পারে। ফন্ট অনুরোধগুলো CORS রিসোর্স, তাই ক্রস‑অরিজিন ডেলিভারি ও প্রিলোডে সঠিক crossorigin হ্যান্ডলিং দরকার।
Preload একটি প্রায়োরিটি ওভাররাইড, শীতল‑স্পিড সুইচ নয়। এটি অন্যান্য ক্রিটিকাল ওয়ার্কের সাথে প্রতিযোগিতা করতে পারে এবং এমন ফেইস ডাউনলোড করতে পারে যেটি কোনো রুটই প্রয়োজন করে না; এটি unicode-range নির্বাচকও বাইপাস করে। প্রথমে দেরি আবিষ্কার ঠিক করুন, তারপর সর্বোচ্চ একটি প্রমাণিত ফার্স্ট‑ভিউ ফাইল প্রিলোড করুন—সঠিক URL, as=font, এবং crossorigin ব্যবহার করে। Google Fonts বলে API অনুরোধে ভিজিটরের IP ঠিকানা, অনুরোধকৃত URL, HTTP হেডার, এবং রেফারার অন্তর্ভুক্ত; এটি বলে API কুকি সেট করে না বা লগ করে না এবং সংগৃহীত তথ্যকে প্রোফাইল বা টার্গেটেড বিজ্ঞাপনের জন্য ব্যবহার করে না। সেলফ‑হোস্টিং সেই লোডগুলোর জন্য Google‑কে ডেটা গ্রহণ বন্ধ করে দিতে পারে। ডেলিভারি, প্রাইভেসি নোটিশ, বিচারব্যাপী অধিকার, কন্ট্রাক্ট, এবং প্রয়োজনে যোগ্য পরামর্শ মূল্যায়ন করুন।
কোল্ড‑ক্যাশ ট্রেস তুলনা করুন এবং নিশ্চিত করুন প্রিলোড করা ফাইলটি রুটে ব্যবহার হচ্ছে।
সংযোগ সেটআপ, ক্যাশ ও CDN ক্ষমতা, অ্যাসেট রক্ষণাবেক্ষণ, এবং ভিজিটর‑ডেটা প্রবাহের বিষয়ে ওজন করুন।
ফন্ট অ্যাসেট ভার্সনিং করুন এবং পরীক্ষিত CSS ফলব্যাক কনফিগারেশন বজায় রাখুন।
রেন্ডারেড আচরণ পরীক্ষা করুন এবং ফন্টগুলোকে একটি প্রতিরোধক নির্ভরশীলতা হিসেবে পরিচালনা করুন
কোল্ড‑ক্যাশ নিয়ে ব্রাউজারের নেটওয়ার্ক টুল দিয়ে CSS‑to‑font অনুরোধ চেইন, টাইমিং, উত্স, ক্যাশিং, এবং ব্যর্থতা নিরীক্ষণ করুন। একটি সীমাবদ্ধ সংযোগে পুনরায় চালান, তারপর ফন্ট থ্রটল বা ব্লক করুন। সাফল্য মানে কাস্টম ফেইস আগমনের আগেই পাঠযোগ্য টেক্সট, ব্যবহারযোগ্য কন্ট্রোল, সঠিক প্রতীক, এবং সঙ্ঘবদ্ধ লেআউট। বাস্তবসম্মত ন্যারো এবং ডেস্কটপ লেআউট, দীর্ঘ স্ট্রিং, ত্রুটি, সম্মতি কপি, মূল্য, এবং প্রতিটি সমর্থিত স্ক্রিপ্ট পরীক্ষা করুন।
Chromium‑এ Performance panel‑এ একটি রিলোড রেকর্ড করুন এবং Layout Shifts ট্র্যাক পরীক্ষা করুন; DevTools সরলভাবে সরানো উপাদানগুলো শনাক্ত করতে পারে এবং শিফটগুলোর অ্যানিমেশন দেখায়। ফন্ট লোডিং একটি পরিচিত কারণ, কিন্তু সরানো উপাদান সবসময় মূল কারণ নাও হতে পারে, তাই ট্রেসকে ফন্ট অ্যাপ্লিকেশনের সাথে মিলিয়ে দেখুন। Layout Instability API Chromium‑নির্ভর, যা ক্রস‑ব্রাউজার ভিজ্যুয়াল চেকগুলো গুরুত্বপূর্ণ করে তোলে। রিলিজ রিভিউতে ফন্ট অ্যাসেট, CORS আচরণ, ক্যাশ পলিসি, ফলব্য্যাক, এবং রোলব্যাক অন্তর্ভুক্ত করুন। উদ্দেশ্য করা হ্রাসকৃত মোডটি পাঠযোগ্য টেক্সট—খালি কনটেন্ট বা ভেঙে যাওয়া নেভিগেশন নয়।
ওয়ার্ম ক্যাশ প্রথম অনুরোধ ও রেন্ডারিং সমস্যা লুকাতে পারে।
ফাইল, CMS কপির, টেমপ্লেট, প্রোভাইডার, বা CDN নিয়ম বদলালে চেক পুনরায় চালান।