বেশির ভাগ সাইটে Web fonts এখনও সবচেয়ে সহজ পারফরম্যান্স জয়

যে প্যাটার্নটি বারবার দেখা যায়

আজ যদি আপনি এলোমেলোভাবে দশটি production website audit করেন, বেশির ভাগ ক্ষেত্রেই font নিয়ে প্রায় একই পরিস্থিতি পাবেন:

• Home page-এ ছয় থেকে দশটি font file লোড হয়
• সবগুলো WOFF2-তে (ভালো), কিন্তু কোনো font-display strategy নেই (খারাপ)
• এমন কয়েকটি weight এবং style থাকে যা পেজের কোথাও ব্যবহারই হচ্ছে না
• পুরো stack একটি third-party domain থেকে serve করা হয় (সাধারণত Google Fonts), সঙ্গে আসে DNS, TLS এবং privacy-র সব খরচ
• কোনো unicode-range subsetting নেই, ফলে পেজটি English হলেও প্রতিটি visitor Cyrillic এবং Greek glyphs ডাউনলোড করে

এটি শুধু ছোট সাইটের সমস্যা নয়। যথেষ্ট বাজেট থাকা অনেক marketing page এখনও প্রথম paragraph paintable হওয়ার আগেই 600 KB font লোড করে। প্যাটার্নটি একবার চোখে পড়লে আর না দেখে থাকা যায় না।

সমাধানটি অদ্ভুত কিছু নয়। এটি কয়েকটি সুপরিচিত technique, যা বহু বছর ধরে browser-এ আছে।

ছয়টি static font-এর বদলে একটি variable font ব্যবহার করুন

আপনি যদি Inter Regular, Inter Medium, Inter SemiBold, Inter Bold এবং সেগুলোর italics লোড করেন, তাহলে প্রয়োজনের তুলনায় আনুমানিক ছয় গুণ বেশি bytes ডাউনলোড করছেন। একটি মাত্র Inter variable font পুরো weight axis (এবং কিছু build-এ slant) এক ফাইলে কভার করে, যার আকার মাত্র দুইটি static weight-এর চেয়ে সামান্য বড়।

Browser support নিয়ে গল্প বহু আগেই মিটে গেছে — variable fonts যেখানে গুরুত্বপূর্ণ, সব জায়গাতেই কাজ করে। বাকি দ্বিধা বেশির ভাগই static-font যুগের অভ্যাস থেকে পাওয়া।

ব্যবহারিক নিয়ম: প্রতি script, প্রতি family-তে একটি variable font file। Latin এক ফাইলে, Cyrillic আরেকটিতে, Greek তৃতীয়টিতে, unicode-range দিয়ে শর্তসাপেক্ষে লোড হবে। এতটুকুই।

যুক্তিসঙ্গত font-display সেট করুন

Custom font এখনও লোড হচ্ছে—এ অবস্থায় default behaviour হলো কিছুই না দেখানো — invisible text — সর্বোচ্চ তিন সেকেন্ড পর্যন্ত। এটি সবচেয়ে খারাপ default। Users একটি blank page দেখে ধরে নেয় কিছু নষ্ট হয়েছে।

প্রতিটি @font-face rule-এ এটি যোগ করুন:

@font-face {
  font-family: 'Inter';
  src: url('/fonts/inter-var.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-display: swap;
}

swap fallback font সঙ্গে সঙ্গে দেখায় এবং custom font লোড হলে সেটিতে swap করে। User millisecond zero থেকেই পেজ পড়তে পারে। বিনিময়ে swap হওয়ার সময় সামান্য layout shift হতে পারে, যা পরের technique দিয়ে কমানো যায়।

আপনার fallback metrics মিলিয়ে নিন

unstyled text-এর flash তখনই বিরক্তিকর লাগে, যখন fallback এবং custom font-এর metrics খুব আলাদা হয়। Modern CSS এটি size-adjust, ascent-override এবং অনুরূপ প্রপার্টি দিয়ে ঠিক করে:

@font-face {
  font-family: 'Inter Fallback';
  src: local('Arial');
  size-adjust: 107%;
  ascent-override: 90%;
  descent-override: 22%;
  line-gap-override: 0%;
}

Fallback metrics ঠিকমতো tune করা থাকলে swap প্রায় বোঝাই যায় না — custom font আসার আগে ও পরে শব্দগুলো একই horizontal space দখল করে।

Google-এর --allow-fallback-font-metrics কাজ এখন baseline browser support, এবং tooling pipeline আছে (fontaine library এবং অনুরূপ), যা কয়েক সেকেন্ডে আপনার জন্য সঠিক সংখ্যাগুলো হিসাব করে দেয়।

Self-host করুন

Google Fonts সুবিধাজনক, free, এবং এর সঙ্গে দুটি বাস্তব খরচ আসে:

1. দ্বিতীয় TLS handshake। HTTP/3 এবং connection coalescing থাকলেও, একটি extra origin খুব কম ক্ষেত্রেই বিনা খরচে আসে।
2. Privacy এবং compliance প্রশ্ন। কয়েকটি European court রায় দিয়েছে যে fonts.gstatic.com থেকে Google Fonts লোড করা মানে personal data (IP address) third party-র কাছে পাঠানো। Self-hosting প্রশ্নটিই পুরোপুরি সরিয়ে দেয়।

Download-and-host pipeline হলো:

1. WOFF2 file নিন (থাকলে variable build)
2. আপনার audience আসলে যে scripts ব্যবহার করে, সেগুলোতে subset করুন
3. সাইটের বাকি অংশের মতো একই origin থেকে serve করুন, দীর্ঘ Cache-Control: max-age=31536000, immutable সহ
4. সবচেয়ে critical weight preload করুন: <link rel="preload" as="font" type="font/woff2" href="/fonts/inter-var.woff2" crossorigin>

এটাই পুরো pipeline। একটি existing site-এর জন্য এক বিকেল লাগে, এবং প্রায় কখনোই আর পেছনে ফিরতে হয় না।

কখন custom fonts পুরোপুরি বাদ দেবেন

এটি স্পষ্ট করে বলা দরকার: প্রতিটি সাইটের custom font দরকার নেই। System font stack এখন প্রতিটি operating system-এ সত্যিই সুন্দর:

font-family: system-ui, -apple-system, 'Segoe UI', Roboto, Inter, sans-serif;

Weight ঠিক, metrics ঠিক, rendering device-এর জন্য tune করা, এবং bytes-on-the-wire cost ঠিক শূন্য। কোনো tools site, internal app, content-কে অগ্রাধিকার দেওয়া portfolio, বা slow networks-এর users লক্ষ্য করে বানানো কিছুর জন্য system stack-ই সঠিক উত্তর।

<!-- tool-cta:start -->

💡 এটি চেষ্টা করুন: Webfont Generator ব্যবহার করে আপনার TTF বা OTF ফাইলগুলোকে প্রস্তুত-ব্যবহারযোগ্য CSS সহ আধুনিক WOFF2-এ রূপান্তর করুন, পোস্টটি যে ফরম্যাট পরিবর্তনের সুপারিশ করে সেটিই এটি।

<!-- tool-cta:end -->

সৎ সারাংশ

একটি সাধারণ ছোট সাইটের জন্য, web-font performance-এর পুরো গল্প চার ধাপে মিটে যায়:

1. প্রতি family প্রতি script-এ একটি variable font
2. matched fallback metrics সহ font-display: swap
3. দীর্ঘ cache headers এবং critical weight-এর জন্য preload সহ Self-hosted
4. অথবা fonts পুরোপুরি বাদ দিন এবং system stack ব্যবহার করুন

এটি একবার করুন, home page থেকে কয়েকশ kilobytes ফেরত পাবেন, perceived performance-এ কয়েকশ milliseconds জিতবেন, এবং পথিমধ্যে একটি third-party dependency সরিয়ে ফেলবেন। effort-to-payoff ratio-তে এর চেয়ে ভালো পরিবর্তন খুব কম।