ওয়েব ফন্টের আকার হ্রাস করুন

Ilya Grigorik

Jeremy Wagner

ভালো ডিজাইন, ব্র্যান্ডিং, পঠনযোগ্যতা এবং অ্যাক্সেসিবিলিটির জন্য টাইপোগ্রাফি অপরিহার্য। ওয়েব ফন্ট উপরোক্ত সবকিছু এবং আরও অনেক কিছু সম্ভব করে তোলে: এর টেক্সট নির্বাচনযোগ্য, অনুসন্ধানযোগ্য, জুমযোগ্য এবং হাই-ডিপিআই বান্ধব, যা স্ক্রিনের আকার ও রেজোলিউশন নির্বিশেষে সামঞ্জস্যপূর্ণ এবং সুস্পষ্ট টেক্সট রেন্ডারিং প্রদান করে। ভালো ডিজাইন, ইউএক্স (UX) এবং পারফরম্যান্সের জন্য ওয়েব ফন্ট অত্যন্ত গুরুত্বপূর্ণ।

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

একটি ওয়েব ফন্টের গঠন

একটি ওয়েব ফন্ট হলো গ্লিফের একটি সংগ্রহ, এবং প্রতিটি গ্লিফ হলো একটি ভেক্টর আকৃতি যা একটি অক্ষর বা প্রতীককে বর্ণনা করে। ফলস্বরূপ, দুটি সাধারণ চলক একটি নির্দিষ্ট ফন্ট ফাইলের আকার নির্ধারণ করে: প্রতিটি গ্লিফের ভেক্টর পাথের জটিলতা এবং একটি নির্দিষ্ট ফন্টে গ্লিফের সংখ্যা। উদাহরণস্বরূপ, ওপেন স্যান্স, যা সবচেয়ে জনপ্রিয় ওয়েবফন্টগুলোর মধ্যে একটি, তাতে ৮৯৭টি গ্লিফ রয়েছে, যার মধ্যে ল্যাটিন, গ্রিক এবং সিরিলিক অক্ষর অন্তর্ভুক্ত।

ফন্ট বাছাই করার সময়, কোন কোন ক্যারেক্টার সেট সমর্থিত তা বিবেচনা করা গুরুত্বপূর্ণ। যদি আপনার পেজের কন্টেন্ট একাধিক ভাষায় স্থানীয়করণ করার প্রয়োজন হয়, তবে আপনার এমন একটি ফন্ট ব্যবহার করা উচিত যা আপনার ব্যবহারকারীদের একটি সামঞ্জস্যপূর্ণ চেহারা এবং অভিজ্ঞতা দিতে পারে। উদাহরণস্বরূপ, গুগলের নোটো (Noto) ফন্ট ফ্যামিলি বিশ্বের সমস্ত ভাষা সমর্থন করার লক্ষ্য রাখে। তবে মনে রাখবেন যে, সমস্ত ভাষা অন্তর্ভুক্ত করলে নোটো ফন্টের মোট আকার ১.১ জিবি-র বেশি একটি জিপ (ZIP) ফাইল হয়ে যায়।

এই পোস্টে আপনি জানতে পারবেন, কীভাবে আপনার ওয়েব ফন্টের ফাইল সাইজ কমানো যায়।

ওয়েব ফন্ট ফরম্যাট

বর্তমানে ওয়েবে দুটি প্রস্তাবিত ফন্ট কন্টেইনার ফরম্যাট ব্যবহৃত হয়:

• EOT
• টিটিএফ
• WOFF
• WOFF2 .

WOFF এবং WOFF 2.0 ব্যাপকভাবে সমর্থিত এবং সকল আধুনিক ব্রাউজার দ্বারা সমর্থিত।

• আধুনিক ব্রাউজারগুলিতে WOFF 2.0 সংস্করণটি পরিবেশন করুন।
• যদি একান্তই প্রয়োজন হয়—যেমন, যদি আপনাকে এখনও ইন্টারনেট এক্সপ্লোরার ১১ সমর্থন করতে হয়—তবে ফলব্যাক হিসেবে WOFF পরিবেশন করুন।
• বিকল্পভাবে, পুরোনো ব্রাউজারগুলোর জন্য ওয়েব ফন্ট ব্যবহার না করে সিস্টেম ফন্টে ফিরে যাওয়ার কথা বিবেচনা করতে পারেন। এটি পুরোনো ও সীমিত ক্ষমতার ডিভাইসগুলোর জন্যও আরও ভালো পারফরম্যান্স দিতে পারে।
• যেহেতু WOFF এবং WOFF 2.0 এখনও ব্যবহৃত আধুনিক ও পুরোনো সব ব্রাউজারের জন্য উপযুক্ত, তাই EOT এবং TTF ব্যবহারের আর প্রয়োজন নেই এবং এর ফলে ওয়েব ফন্ট ডাউনলোড হতে বেশি সময় লাগতে পারে।

ওয়েব ফন্ট এবং কম্প্রেশন

WOFF এবং WOFF 2.0 উভয়েরই বিল্ট-ইন কম্প্রেশন রয়েছে। WOFF 2.0-এর অভ্যন্তরীণ কম্প্রেশনে Brotli ব্যবহৃত হয় এবং এটি WOFF-এর চেয়ে ৩০% পর্যন্ত উন্নত কম্প্রেশন প্রদান করে। আরও তথ্যের জন্য, WOFF 2.0 মূল্যায়ন প্রতিবেদনটি দেখুন।

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

@font-face ব্যবহার করে একটি ফন্ট ফ্যামিলি নির্ধারণ করুন।

@font-face CSS অ্যাট-রুলটি আপনাকে একটি নির্দিষ্ট ফন্ট রিসোর্সের অবস্থান, এর স্টাইলের বৈশিষ্ট্য এবং যে ইউনিকোড কোডপয়েন্টগুলোর জন্য এটি ব্যবহার করা হবে, তা নির্ধারণ করার সুযোগ দেয়। এই ধরনের @font-face ডিক্লারেশনগুলোর সমন্বয়ে একটি "ফন্ট ফ্যামিলি" তৈরি করা যায়, যা ব্যবহার করে ব্রাউজার মূল্যায়ন করে যে কোন ফন্ট রিসোর্সগুলো ডাউনলোড করে বর্তমান পেজে প্রয়োগ করতে হবে।

পরিবর্তনশীল ফন্ট বিবেচনা করুন

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

ভেরিয়েবল ফন্ট এখন সব আধুনিক ব্রাউজারে সমর্থিত, এ বিষয়ে আরও জানতে ‘ওয়েবে ভেরিয়েবল ফন্টের পরিচিতি’ অংশটি পড়ুন।

সঠিক ফরম্যাট নির্বাচন করুন

প্রতিটি @font-face ডিক্লারেশনে ফন্ট ফ্যামিলির নাম (যা একাধিক ডিক্লারেশনের একটি যৌক্তিক গ্রুপ হিসেবে কাজ করে), স্টাইল, ওয়েট ও স্ট্রেচের মতো ফন্ট প্রোপার্টি এবং src ডেসক্রিপ্টর থাকে, যা ফন্ট রিসোর্সের জন্য স্থানগুলোর একটি অগ্রাধিকার তালিকা নির্দিষ্ট করে।

@font-face {
  font-family: 'Awesome Font';
  font-style: normal;
  font-weight: 400;
  src: local('Awesome Font'),
       url('/fonts/awesome.woff2') format('woff2'),
       /* Only serve WOFF if necessary. Otherwise,
          WOFF 2.0 is fine by itself. */
       url('/fonts/awesome.woff') format('woff');
}

@font-face {
  font-family: 'Awesome Font';
  font-style: italic;
  font-weight: 400;
  src: local('Awesome Font Italic'),
       url('/fonts/awesome-i.woff2') format('woff2'),
       url('/fonts/awesome-i.woff') format('woff');
}

প্রথমত, লক্ষ্য করুন যে উপরের উদাহরণগুলো দুটি স্টাইল (নরমাল এবং ইটালিক ) সহ একটিমাত্র Awesome Font ফ্যামিলিকে সংজ্ঞায়িত করে, যার প্রতিটি ফন্ট রিসোর্সের একটি ভিন্ন সেটকে নির্দেশ করে। ফলস্বরূপ, প্রতিটি src ডেসক্রিপ্টরে রিসোর্স ভ্যারিয়েন্টগুলোর একটি অগ্রাধিকার-ভিত্তিক, কমা-দ্বারা-বিভক্ত তালিকা থাকে:

• ` local() ` ডিরেক্টিভটি আপনাকে স্থানীয়ভাবে ইনস্টল করা ফন্ট রেফারেন্স করতে, লোড করতে এবং ব্যবহার করতে দেয়। যদি ব্যবহারকারীর সিস্টেমে ফন্টটি আগে থেকেই ইনস্টল করা থাকে, তবে এটি নেটওয়ার্ককে সম্পূর্ণরূপে বাইপাস করে এবং এটিই সবচেয়ে দ্রুত।
• url() ` ডিরেক্টিভটি আপনাকে বাহ্যিক ফন্ট লোড করার সুযোগ দেয় এবং এতে একটি ঐচ্ছিক ` format() হিন্ট থাকতে পারে, যা প্রদত্ত URL দ্বারা নির্দেশিত ফন্টের ফরম্যাট বোঝায়।

যখন ব্রাউজার বুঝতে পারে যে ফন্টটির প্রয়োজন, তখন এটি নির্দিষ্ট ক্রমে প্রদত্ত রিসোর্স তালিকাটি পরীক্ষা করে এবং উপযুক্ত রিসোর্সটি লোড করার চেষ্টা করে। উদাহরণস্বরূপ, উপরের উদাহরণটি অনুসরণ করে:

1. ব্রাউজার পেজের লেআউট তৈরি করে এবং পেজে নির্দিষ্ট টেক্সট রেন্ডার করার জন্য কোন কোন ফন্ট ভ্যারিয়েন্টের প্রয়োজন হবে তা নির্ধারণ করে। যে ফন্টগুলো পেজের CSS অবজেক্ট মডেল (CSSOM)- এর অংশ নয়, সেগুলো ব্রাউজার ডাউনলোড করে না, কারণ সেগুলোর প্রয়োজন হয় না।
2. প্রতিটি প্রয়োজনীয় ফন্টের জন্য ব্রাউজার যাচাই করে দেখে যে ফন্টটি স্থানীয়ভাবে উপলব্ধ আছে কি না।
3. ফন্টটি স্থানীয়ভাবে উপলব্ধ না থাকলে, ব্রাউজারটি বাহ্যিক সংজ্ঞাগুলো ব্যবহার করে:
   • যদি কোনো ফরম্যাট হিন্ট উপস্থিত থাকে, তাহলে ব্রাউজার ডাউনলোড শুরু করার আগে হিন্টটি সমর্থন করে কি না তা পরীক্ষা করে দেখে। যদি ব্রাউজারটি হিন্টটি সমর্থন না করে, তবে এটি পরবর্তীটিতে চলে যায়।
   • যদি কোনো ফরম্যাট ইঙ্গিত না থাকে, তাহলে ব্রাউজার রিসোর্সটি ডাউনলোড করে।

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

ইউনিকোড-রেঞ্জ সাবসেটিং

স্টাইল, ওয়েট এবং স্ট্রেচ-এর মতো ফন্ট প্রোপার্টিগুলোর পাশাপাশি, @font-face রুলটি আপনাকে প্রতিটি রিসোর্স দ্বারা সমর্থিত ইউনিকোড কোডপয়েন্টের একটি সেট নির্ধারণ করার সুযোগ দেয়। এর ফলে আপনি একটি বড় ইউনিকোড ফন্টকে ছোট ছোট উপসেটে (যেমন, ল্যাটিন, সিরিলিক এবং গ্রিক উপসেট) বিভক্ত করতে পারেন এবং কোনো নির্দিষ্ট পৃষ্ঠায় টেক্সট রেন্ডার করার জন্য শুধুমাত্র প্রয়োজনীয় গ্লিফগুলো ডাউনলোড করতে পারেন।

unicode-range ডেসক্রিপ্টর আপনাকে রেঞ্জ ভ্যালুগুলোর একটি কমা-বিভাজিত তালিকা নির্দিষ্ট করার সুযোগ দেয়, যার প্রতিটি তিনটি ভিন্ন রূপের যেকোনো একটিতে থাকতে পারে:

• একক কোডপয়েন্ট (উদাহরণস্বরূপ, U+416 )
• ব্যবধান পরিসর (উদাহরণস্বরূপ, U+400-4ff ): একটি পরিসরের শুরু এবং শেষের কোডপয়েন্ট নির্দেশ করে।
• ওয়াইল্ডকার্ড পরিসর (উদাহরণস্বরূপ, U+4?? ): ? অক্ষরগুলো যেকোনো হেক্সাডেসিমাল অঙ্ক নির্দেশ করে।

উদাহরণস্বরূপ, আপনি আপনার Awesome Font ফ্যামিলিকে ল্যাটিন এবং জাপানি উপগোষ্ঠীতে ভাগ করতে পারেন, যার প্রতিটি ব্রাউজার প্রয়োজন অনুযায়ী ডাউনলোড করে নেয়:

@font-face {
  font-family: 'Awesome Font';
  font-style: normal;
  font-weight: 400;
  src: local('Awesome Font'),
       url('/fonts/awesome-l.woff2') format('woff2');
  /* Latin glyphs */
  unicode-range: U+000-5FF;
}

@font-face {
  font-family: 'Awesome Font';
  font-style: normal;
  font-weight: 400;
  src: local('Awesome Font'),
       url('/fonts/awesome-jp.woff2') format('woff2');
  /* Japanese glyphs */
  unicode-range: U+3000-9FFF, U+ff??;
}

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

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

1. কোন উপসেটগুলির প্রয়োজন তা নির্ধারণ করুন:
   • যদি ব্রাউজার ইউনিকোড-রেঞ্জ সাবসেটিং সমর্থন করে, তাহলে এটি স্বয়ংক্রিয়ভাবে সঠিক সাবসেটটি নির্বাচন করবে। পেজটিকে শুধু সাবসেট ফাইলগুলো সরবরাহ করতে হবে এবং @font-face রুলগুলোতে উপযুক্ত ইউনিকোড-রেঞ্জগুলো নির্দিষ্ট করে দিতে হবে।
   • যদি ব্রাউজার ইউনিকোড-রেঞ্জ সাবসেটিং সমর্থন না করে, তাহলে পৃষ্ঠাটি থেকে সমস্ত অপ্রয়োজনীয় সাবসেট লুকিয়ে ফেলতে হবে; অর্থাৎ, ডেভেলপারকে অবশ্যই প্রয়োজনীয় সাবসেটগুলো নির্দিষ্ট করে দিতে হবে।
2. ফন্ট সাবসেট তৈরি করুন:
   • আপনার ফন্টগুলোকে সাবসেট ও অপ্টিমাইজ করতে ওপেন-সোর্স pyftsubset টুলটি ব্যবহার করুন।
   • কিছু ফন্ট সার্ভার—যেমন গুগল ফন্ট—ডিফল্টরূপে স্বয়ংক্রিয়ভাবে সাবসেট করে থাকে।
   • কিছু ফন্ট পরিষেবা কাস্টম কোয়েরি প্যারামিটারের মাধ্যমে ম্যানুয়াল সাবসেটিং-এর সুযোগ দেয়, যা ব্যবহার করে আপনি আপনার পৃষ্ঠার জন্য প্রয়োজনীয় সাবসেটটি ম্যানুয়ালি নির্দিষ্ট করতে পারেন। আপনার ফন্ট সরবরাহকারীর ডকুমেন্টেশন দেখুন।

ফন্ট নির্বাচন এবং সংশ্লেষণ

প্রতিটি ফন্ট ফ্যামিলি একাধিক শৈলীগত রূপ (রেগুলার, বোল্ড, ইটালিক) এবং প্রতিটি শৈলীর জন্য একাধিক ওয়েট নিয়ে গঠিত হতে পারে। যার প্রত্যেকটিতে আবার খুব ভিন্ন গ্লিফ আকৃতি থাকতে পারে—উদাহরণস্বরূপ, ভিন্ন স্পেসিং, সাইজিং, বা সম্পূর্ণ ভিন্ন কোনো আকৃতি।

উপরের চিত্রটি এমন একটি ফন্ট পরিবারকে চিত্রিত করে যা তিনটি ভিন্ন বোল্ড ওয়েট প্রদান করে:

• ৪০০ (নিয়মিত)।
• ৭০০ (গাঢ়)।
• ৯০০ (অতিরিক্ত গাঢ়)।

অন্যান্য সমস্ত মধ্যবর্তী ভ্যারিয়েন্ট (ধূসর রঙে চিহ্নিত) ব্রাউজার দ্বারা স্বয়ংক্রিয়ভাবে নিকটতম ভ্যারিয়েন্টে ম্যাপ করা হয়।

যখন এমন কোনো ওয়েট নির্দিষ্ট করা হয় যার কোনো ফেস বিদ্যমান নেই, তখন কাছাকাছি ওয়েটযুক্ত একটি ফেস ব্যবহার করা হয়। সাধারণত, বোল্ড ওয়েটগুলো ভারী ওয়েটযুক্ত ফেসগুলোতে এবং হালকা ওয়েটগুলো হালকা ওয়েটযুক্ত ফেসগুলোতে ম্যাপ হয়।

CSS ফন্ট মেলানোর অ্যালগরিদম

ইটালিক ভ্যারিয়েন্টের ক্ষেত্রেও একই যুক্তি প্রযোজ্য। ফন্ট ডিজাইনার নিয়ন্ত্রণ করেন যে তিনি কোন ভ্যারিয়েন্টগুলো তৈরি করবেন, এবং আপনি নিয়ন্ত্রণ করেন যে আপনি পৃষ্ঠায় কোন ভ্যারিয়েন্টগুলো ব্যবহার করবেন। যেহেতু প্রতিটি ভ্যারিয়েন্ট আলাদাভাবে ডাউনলোড করতে হয়, তাই ভ্যারিয়েন্টের সংখ্যা কম রাখাই ভালো। উদাহরণস্বরূপ, আপনি Awesome Font ফ্যামিলির জন্য দুটি বোল্ড ভ্যারিয়েন্ট নির্ধারণ করতে পারেন:

@font-face {
  font-family: 'Awesome Font';
  font-style: normal;
  font-weight: 400;
  src: local('Awesome Font'),
       url('/fonts/awesome-l.woff2') format('woff2');
  /* Latin glyphs */
  unicode-range: U+000-5FF;
}

@font-face {
  font-family: 'Awesome Font';
  font-style: normal;
  font-weight: 700;
  src: local('Awesome Font'),
       url('/fonts/awesome-l-700.woff2') format('woff2');
  /* Latin glyphs */
  unicode-range: U+000-5FF;
}

উপরের উদাহরণটিতে Awesome Font ফ্যামিলিটি ডিক্লেয়ার করা হয়েছে, যা দুটি রিসোর্স দিয়ে গঠিত। এই রিসোর্সগুলো একই ল্যাটিন গ্লিফ সেট ( U+000-5FF ) কভার করে, কিন্তু দুটি ভিন্ন "ওয়েট" অফার করে: normal (400) এবং bold (700)। কিন্তু, যদি আপনার কোনো CSS রুল একটি ভিন্ন ফন্ট ওয়েট নির্দিষ্ট করে দেয়, অথবা font-style প্রপার্টিকে italic এ সেট করে, তাহলে কী হবে?

• যদি হুবহু মিলে যায় এমন কোনো ফন্ট পাওয়া না যায়, তাহলে ব্রাউজার সবচেয়ে কাছাকাছি মিল থাকা ফন্টটি ব্যবহার করে।
• যদি শৈলীগতভাবে কোনো মিল খুঁজে না পাওয়া যায় (উদাহরণস্বরূপ, উপরের উদাহরণে কোনো ইটালিক সংস্করণ ঘোষণা করা হয়নি), তাহলে ব্রাউজার তার নিজস্ব ফন্ট সংস্করণ তৈরি করে নেয়।

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

ওয়েব ফন্ট সাইজ অপ্টিমাইজেশন চেকলিস্ট

• আপনার ফন্টের ব্যবহার নিরীক্ষা ও পর্যবেক্ষণ করুন: আপনার পেজগুলিতে খুব বেশি ফন্ট ব্যবহার করবেন না এবং প্রতিটি ফন্টের ব্যবহৃত ভ্যারিয়েন্টের সংখ্যা সীমিত রাখুন। এটি আপনার ব্যবহারকারীদের জন্য আরও সামঞ্জস্যপূর্ণ এবং দ্রুততর অভিজ্ঞতা তৈরিতে সহায়তা করে।
• সম্ভব হলে পুরোনো ফরম্যাটগুলো এড়িয়ে চলুন: EOT, TTF, এবং WOFF ফরম্যাটগুলো WOFF 2.0-এর চেয়ে আকারে বড়। EOT এবং TTF একেবারেই অপ্রয়োজনীয় ফরম্যাট, যেখানে ইন্টারনেট এক্সপ্লোরার ১১ সমর্থন করার প্রয়োজন হলে WOFF গ্রহণযোগ্য হতে পারে। আপনি যদি শুধুমাত্র আধুনিক ব্রাউজারগুলোকে লক্ষ্য করেন, তবে কেবল WOFF 2.0 ব্যবহার করাই সবচেয়ে সহজ এবং সেরা পারফরম্যান্সের বিকল্প।
• আপনার ফন্ট রিসোর্স সাবসেট করুন: অনেক ফন্টকে সাবসেট করা যায়, অর্থাৎ একাধিক ইউনিকোড-রেঞ্জে ভাগ করা যায়, যাতে কোনো নির্দিষ্ট পৃষ্ঠার জন্য শুধু প্রয়োজনীয় গ্লিফগুলোই সরবরাহ করা যায়। এটি ফাইলের আকার কমায় এবং রিসোর্সটির ডাউনলোড গতি বাড়ায়। তবে, সাবসেটগুলো নির্ধারণ করার সময় ফন্টের পুনঃব্যবহারের জন্য অপ্টিমাইজ করতে সতর্ক থাকুন। উদাহরণস্বরূপ, প্রতিটি পৃষ্ঠায় ভিন্ন কিন্তু ওভারল্যাপিং অক্ষরের সেট ডাউনলোড করবেন না। একটি ভালো অভ্যাস হলো স্ক্রিপ্টের উপর ভিত্তি করে সাবসেট করা: যেমন, ল্যাটিন এবং সিরিলিক।
• আপনার src তালিকায় local() কে অগ্রাধিকার দিন: src তালিকায় local('Font Name') কে প্রথমে রাখলে, আগে থেকে ইনস্টল করা ফন্টগুলোর জন্য HTTP অনুরোধ পাঠানো হয় না।
• টেক্সট কম্প্রেশন পরীক্ষা করতে লাইটহাউস ব্যবহার করুন ।

বৃহত্তম বিষয়বস্তুপূর্ণ পেইন্ট (LCP) এবং ক্রমবর্ধমান লেআউট শিফট (CLS)-এর উপর প্রভাব

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

আপনার অপ্টিমাইজেশনের প্রচেষ্টা সত্ত্বেও, বড় ওয়েব ফন্ট রিসোর্সের কারণে পেজের টেক্সট প্রদর্শিত হতে অনেক বেশি সময় লাগতে পারে বলে যদি আপনি চিন্তিত হন, তবে font-display প্রপার্টিতে এমন অনেক সেটিংস রয়েছে যা ফন্ট ডাউনলোড হওয়ার সময় টেক্সট অদৃশ্য হয়ে যাওয়া এড়াতে আপনাকে সাহায্য করতে পারে। তবে, swap ) ভ্যালু ব্যবহার করলে লেআউটে উল্লেখযোগ্য পরিবর্তন আসতে পারে, যা আপনার সাইটের কিউমুলেটিভ লেআউট শিফট (CLS)- কে প্রভাবিত করে। সম্ভব হলে optional ) বা fallback ভ্যালু ব্যবহার করার কথা বিবেচনা করুন।

আপনার ওয়েব ফন্টগুলো যদি আপনার ব্র্যান্ডিংয়ের জন্য—এবং সেই সূত্রে ব্যবহারকারীর অভিজ্ঞতার জন্য—অত্যাবশ্যক হয়, তবে ফন্টগুলো প্রি-লোড করার কথা বিবেচনা করতে পারেন, যাতে ব্রাউজার আগে থেকেই সেগুলোর জন্য অনুরোধ করার সুযোগ পায়। আপনি যদি font-display: swap ব্যবহার করেন, তবে এটি সোয়াপ পিরিয়ড কমাতে পারে; আর যদি font-display ব্যবহার না করেন, তবে এটি ব্লকিং পিরিয়ডও কমাতে পারে।