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

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

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

একটি ওয়েব ফন্টের অ্যানাটমি

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

ফন্ট গ্লিফ টেবিল

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

এই পোস্টে আপনি কীভাবে আপনার ওয়েব ফন্টগুলির বিতরণ করা ফাইলের আকার হ্রাস করবেন তা খুঁজে পাবেন।

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

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

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

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

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

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

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

@font-face দিয়ে একটি ফন্ট পরিবারকে সংজ্ঞায়িত করুন

@font-face সিএসএস অ্যাট-রুল আপনাকে একটি নির্দিষ্ট ফন্ট রিসোর্সের অবস্থান, এর শৈলীর বৈশিষ্ট্য এবং ইউনিকোড কোডপয়েন্ট যার জন্য এটি ব্যবহার করা উচিত তা নির্ধারণ করতে দেয়। এই ধরনের @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');
}

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

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

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

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

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

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

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

unicode-range বর্ণনাকারী আপনাকে পরিসরের মানগুলির একটি কমা-বিন্যস্ত তালিকা নির্দিষ্ট করতে দেয়, যার প্রতিটি তিনটি ভিন্ন ফর্মের একটিতে হতে পারে:

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

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

@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 টুল ব্যবহার করুন।
    • কিছু ফন্ট সার্ভার—যেমন Google ফন্ট—ডিফল্টরূপে স্বয়ংক্রিয়ভাবে সাবসেট হয়ে যাবে।
    • কিছু ফন্ট পরিষেবা কাস্টম ক্যোয়ারী প্যারামিটারের মাধ্যমে ম্যানুয়াল সাবসেট করার অনুমতি দেয়, যা আপনি আপনার পৃষ্ঠার জন্য প্রয়োজনীয় সাবসেট ম্যানুয়ালি নির্দিষ্ট করতে ব্যবহার করতে পারেন। আপনার ফন্ট প্রদানকারী থেকে ডকুমেন্টেশন পরামর্শ করুন.

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

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

হরফের ওজন

উপরের চিত্রটি একটি ফন্ট পরিবারকে চিত্রিত করে যা তিনটি ভিন্ন সাহসী ওজন অফার করে:

  • 400 (নিয়মিত)।
  • 700 (গাঢ়)।
  • 900 (অতিরিক্ত সাহসী)।

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

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

CSS ফন্ট ম্যাচিং অ্যালগরিদম

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

@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;
}

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

  • যদি একটি সঠিক ফন্ট মিল উপলব্ধ না হয়, ব্রাউজারটি নিকটতম মিলটি প্রতিস্থাপন করে।
  • যদি কোনো স্টাইলিস্টিক মিল পাওয়া না যায় (উদাহরণস্বরূপ, উপরের উদাহরণে কোনো তির্যক রূপ ঘোষণা করা হয়নি), তাহলে ব্রাউজারটি তার নিজস্ব ফন্ট বৈকল্পিক সংশ্লেষ করে।
হরফ সংশ্লেষণ

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

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

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

সবচেয়ে বড় কন্টেন্টফুল পেইন্ট (LCP) এবং ক্রমবর্ধমান লেআউট শিফট (CLS) এর উপর প্রভাব

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

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

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

,

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

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

একটি ওয়েব ফন্টের অ্যানাটমি

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

ফন্ট গ্লিফ টেবিল

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

এই পোস্টে আপনি কীভাবে আপনার ওয়েব ফন্টগুলির বিতরণ করা ফাইলের আকার হ্রাস করবেন তা খুঁজে পাবেন।

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

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

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

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

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

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

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

@font-face দিয়ে একটি ফন্ট পরিবারকে সংজ্ঞায়িত করুন

@font-face সিএসএস অ্যাট-রুল আপনাকে একটি নির্দিষ্ট ফন্ট রিসোর্সের অবস্থান, এর শৈলীর বৈশিষ্ট্য এবং ইউনিকোড কোডপয়েন্ট যার জন্য এটি ব্যবহার করা উচিত তা নির্ধারণ করতে দেয়। এই ধরনের @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');
}

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

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

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

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

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

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

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

unicode-range বর্ণনাকারী আপনাকে পরিসরের মানগুলির একটি কমা-বিন্যস্ত তালিকা নির্দিষ্ট করতে দেয়, যার প্রতিটি তিনটি ভিন্ন ফর্মের একটিতে হতে পারে:

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

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

@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 টুল ব্যবহার করুন।
    • কিছু ফন্ট সার্ভার—যেমন Google ফন্ট—ডিফল্টরূপে স্বয়ংক্রিয়ভাবে সাবসেট হয়ে যাবে।
    • কিছু ফন্ট পরিষেবা কাস্টম ক্যোয়ারী প্যারামিটারের মাধ্যমে ম্যানুয়াল সাবসেট করার অনুমতি দেয়, যা আপনি আপনার পৃষ্ঠার জন্য প্রয়োজনীয় সাবসেট ম্যানুয়ালি নির্দিষ্ট করতে ব্যবহার করতে পারেন। আপনার ফন্ট প্রদানকারী থেকে ডকুমেন্টেশন পরামর্শ করুন.

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

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

হরফের ওজন

উপরের চিত্রটি একটি ফন্ট পরিবারকে চিত্রিত করে যা তিনটি ভিন্ন সাহসী ওজন অফার করে:

  • 400 (নিয়মিত)।
  • 700 (গাঢ়)।
  • 900 (অতিরিক্ত সাহসী)।

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

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

CSS ফন্ট ম্যাচিং অ্যালগরিদম

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

@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;
}

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

  • যদি একটি সঠিক ফন্ট মিল উপলব্ধ না হয়, ব্রাউজারটি নিকটতম মিলটি প্রতিস্থাপন করে।
  • যদি কোনো স্টাইলিস্টিক মিল পাওয়া না যায় (উদাহরণস্বরূপ, উপরের উদাহরণে কোনো তির্যক রূপ ঘোষণা করা হয়নি), তাহলে ব্রাউজারটি তার নিজস্ব ফন্ট বৈকল্পিক সংশ্লেষ করে।
হরফ সংশ্লেষণ

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

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

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

সবচেয়ে বড় কন্টেন্টফুল পেইন্ট (LCP) এবং ক্রমবর্ধমান লেআউট শিফট (CLS) এর উপর প্রভাব

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

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

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

,

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

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

একটি ওয়েব ফন্টের অ্যানাটমি

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

ফন্ট গ্লিফ টেবিল

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

এই পোস্টে আপনি কীভাবে আপনার ওয়েব ফন্টগুলির বিতরণ করা ফাইলের আকার হ্রাস করবেন তা খুঁজে পাবেন।

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

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

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

  • আধুনিক ব্রাউজারগুলিতে WOFF 2.0 বৈকল্পিক পরিবেশন করুন।
  • যদি একেবারে প্রয়োজনীয় - যেমন আপনাকে এখনও ইন্টারনেট এক্সপ্লোরার 11 সমর্থন করতে হবে, উদাহরণস্বরূপ - ফ্যালব্যাক হিসাবে ডাব্লুওএফকে পরিবেশন করুন।
  • বিকল্পভাবে, লিগ্যাসি ব্রাউজারগুলির জন্য ওয়েব ফন্টগুলি ব্যবহার না করা এবং সিস্টেম ফন্টগুলিতে ফিরে যাওয়া বিবেচনা করুন। এটি পুরানো, আরও সীমাবদ্ধ, ডিভাইসের জন্য আরও পারফরম্যান্ট হতে পারে।
  • যেহেতু ডাব্লুওএফএফ এবং ডাব্লুওএফএফ ২.০ এখনও আধুনিক এবং উত্তরাধিকার ব্রাউজারগুলির জন্য সমস্ত ঘাঁটি ব্যবহার করে, তাই ইওটি এবং টিটিএফ ব্যবহারের আর প্রয়োজন হয় না এবং এর ফলে দীর্ঘ ওয়েব ফন্ট ডাউনলোডের সময় হতে পারে।

ওয়েব ফন্ট এবং সংক্ষেপণ

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

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

@font-face সাথে একটি ফন্ট পরিবারকে সংজ্ঞায়িত করুন

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

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

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

ভেরিয়েবল ফন্টগুলি এখন সমস্ত আধুনিক ব্রাউজার দ্বারা সমর্থিত, ওয়েবে ভেরিয়েবল ফন্টগুলির পরিচিতিতে আরও সন্ধান করুন।

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

প্রতিটি @font-face ঘোষণাপত্রটি ফন্ট পরিবারের নাম সরবরাহ করে, যা একাধিক ঘোষণার যৌক্তিক গোষ্ঠী হিসাবে কাজ করে, ফন্টের বৈশিষ্ট্য যেমন স্টাইল, ওজন এবং প্রসারিত এবং এসআরসি বর্ণনাকারী , যা ফন্টের জন্য অবস্থানের একটি অগ্রাধিকারযুক্ত তালিকা নির্দিষ্ট করে সম্পদ

@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');
}

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

  • local() নির্দেশিকা আপনাকে স্থানীয়ভাবে ইনস্টল করা ফন্টগুলি রেফারেন্স, লোড এবং ব্যবহার করতে দেয়। যদি ব্যবহারকারীর ইতিমধ্যে তাদের সিস্টেমে ফন্ট ইনস্টল করা থাকে তবে এটি নেটওয়ার্কটিকে পুরোপুরি বাইপাস করে এবং এটি দ্রুততম।
  • url() নির্দেশিকা আপনাকে বাহ্যিক ফন্টগুলি লোড করার অনুমতি দেয় এবং সরবরাহিত ইউআরএল দ্বারা উল্লিখিত ফন্টের ফর্ম্যাটটি নির্দেশ করে একটি al চ্ছিক format() ইঙ্গিত ধারণ করার অনুমতি দেয়।

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

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

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

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

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

unicode-range বর্ণনাকারী আপনাকে পরিসীমা মানগুলির একটি কমা-ধ্বংসাত্মক তালিকা নির্দিষ্ট করতে দেয়, যার প্রতিটি তিনটি পৃথক ফর্মের একটিতে হতে পারে:

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

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

@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. ফন্ট সাবসেট উত্পন্ন করুন:
    • আপনার ফন্টগুলি উপসেট এবং অনুকূল করতে ওপেন-সোর্স পাইফ্টসুবসেট সরঞ্জামটি ব্যবহার করুন।
    • কিছু ফন্ট সার্ভার - যেমন গুগল ফন্ট - স্বয়ংক্রিয়ভাবে ডিফল্টরূপে সাবসেট করবে।
    • কিছু ফন্ট পরিষেবাদি কাস্টম ক্যোয়ারী প্যারামিটারগুলির মাধ্যমে ম্যানুয়াল সাবসেট করার অনুমতি দেয়, যা আপনি আপনার পৃষ্ঠার জন্য প্রয়োজনীয় সাবসেটটি ম্যানুয়ালি নির্দিষ্ট করতে ব্যবহার করতে পারেন। আপনার ফন্ট সরবরাহকারীর কাছ থেকে ডকুমেন্টেশনের সাথে পরামর্শ করুন।

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

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

হরফের ওজন

উপরের চিত্রটি একটি ফন্ট পরিবারকে চিত্রিত করে যা তিনটি পৃথক সাহসী ওজন সরবরাহ করে:

  • 400 (নিয়মিত)।
  • 700 (সাহসী)।
  • 900 (অতিরিক্ত সাহসী)।

অন্যান্য সমস্ত অভ্যন্তরীণ রূপগুলি (ধূসর ভাষায় নির্দেশিত) স্বয়ংক্রিয়ভাবে ব্রাউজার দ্বারা নিকটতম বৈকল্পিকটিতে ম্যাপ করা হয়।

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

সিএসএস ফন্ট ম্যাচিং অ্যালগরিদম

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

@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;
}

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

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

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

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

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

বৃহত্তম কন্টেন্টফুল পেইন্ট (এলসিপি) এবং ক্রমবর্ধমান লেআউট শিফট (সিএলএস) এর উপর প্রভাব

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

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

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

,

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

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

একটি ওয়েব ফন্টের শারীরবৃত্ত

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

ফন্ট গ্লাইফ টেবিল

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

এই পোস্টে আপনি কীভাবে আপনার ওয়েব ফন্টগুলির বিতরণ করা ফাইলসাইজ হ্রাস করবেন তা খুঁজে পাবেন।

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

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

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

  • আধুনিক ব্রাউজারগুলিতে WOFF 2.0 বৈকল্পিক পরিবেশন করুন।
  • যদি একেবারে প্রয়োজনীয় - যেমন আপনাকে এখনও ইন্টারনেট এক্সপ্লোরার 11 সমর্থন করতে হবে, উদাহরণস্বরূপ - ফ্যালব্যাক হিসাবে ডাব্লুওএফকে পরিবেশন করুন।
  • বিকল্পভাবে, লিগ্যাসি ব্রাউজারগুলির জন্য ওয়েব ফন্টগুলি ব্যবহার না করা এবং সিস্টেম ফন্টগুলিতে ফিরে যাওয়া বিবেচনা করুন। এটি পুরানো, আরও সীমাবদ্ধ, ডিভাইসের জন্য আরও পারফরম্যান্ট হতে পারে।
  • যেহেতু ডাব্লুওএফএফ এবং ডাব্লুওএফএফ ২.০ এখনও আধুনিক এবং উত্তরাধিকার ব্রাউজারগুলির জন্য সমস্ত ঘাঁটি ব্যবহার করে, তাই ইওটি এবং টিটিএফ ব্যবহারের আর প্রয়োজন হয় না এবং এর ফলে দীর্ঘ ওয়েব ফন্ট ডাউনলোডের সময় হতে পারে।

ওয়েব ফন্ট এবং সংক্ষেপণ

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

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

@font-face সাথে একটি ফন্ট পরিবারকে সংজ্ঞায়িত করুন

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

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

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

ভেরিয়েবল ফন্টগুলি এখন সমস্ত আধুনিক ব্রাউজার দ্বারা সমর্থিত, ওয়েবে ভেরিয়েবল ফন্টগুলির পরিচিতিতে আরও সন্ধান করুন।

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

প্রতিটি @font-face ঘোষণাপত্রটি ফন্ট পরিবারের নাম সরবরাহ করে, যা একাধিক ঘোষণার যৌক্তিক গোষ্ঠী হিসাবে কাজ করে, ফন্টের বৈশিষ্ট্য যেমন স্টাইল, ওজন এবং প্রসারিত এবং এসআরসি বর্ণনাকারী , যা ফন্টের জন্য অবস্থানের একটি অগ্রাধিকারযুক্ত তালিকা নির্দিষ্ট করে সম্পদ

@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');
}

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

  • local() নির্দেশিকা আপনাকে স্থানীয়ভাবে ইনস্টল করা ফন্টগুলি রেফারেন্স, লোড এবং ব্যবহার করতে দেয়। যদি ব্যবহারকারীর ইতিমধ্যে তাদের সিস্টেমে ফন্ট ইনস্টল করা থাকে তবে এটি নেটওয়ার্কটিকে পুরোপুরি বাইপাস করে এবং এটি দ্রুততম।
  • url() নির্দেশিকা আপনাকে বাহ্যিক ফন্টগুলি লোড করার অনুমতি দেয় এবং সরবরাহিত ইউআরএল দ্বারা উল্লিখিত ফন্টের ফর্ম্যাটটি নির্দেশ করে একটি al চ্ছিক format() ইঙ্গিত ধারণ করার অনুমতি দেয়।

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

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

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

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

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

unicode-range বর্ণনাকারী আপনাকে পরিসীমা মানগুলির একটি কমা-ধ্বংসাত্মক তালিকা নির্দিষ্ট করতে দেয়, যার প্রতিটি তিনটি পৃথক ফর্মের একটিতে হতে পারে:

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

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

@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. ফন্ট সাবসেট উত্পন্ন করুন:
    • আপনার ফন্টগুলি উপসেট এবং অনুকূল করতে ওপেন-সোর্স পাইফ্টসুবসেট সরঞ্জামটি ব্যবহার করুন।
    • কিছু ফন্ট সার্ভার - যেমন গুগল ফন্ট - স্বয়ংক্রিয়ভাবে ডিফল্টরূপে সাবসেট করবে।
    • কিছু ফন্ট পরিষেবাদি কাস্টম ক্যোয়ারী প্যারামিটারগুলির মাধ্যমে ম্যানুয়াল সাবসেট করার অনুমতি দেয়, যা আপনি আপনার পৃষ্ঠার জন্য প্রয়োজনীয় সাবসেটটি ম্যানুয়ালি নির্দিষ্ট করতে ব্যবহার করতে পারেন। আপনার ফন্ট সরবরাহকারীর কাছ থেকে ডকুমেন্টেশনের সাথে পরামর্শ করুন।

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

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

হরফের ওজন

উপরের চিত্রটি একটি ফন্ট পরিবারকে চিত্রিত করে যা তিনটি পৃথক সাহসী ওজন সরবরাহ করে:

  • 400 (নিয়মিত)।
  • 700 (সাহসী)।
  • 900 (অতিরিক্ত সাহসী)।

অন্যান্য সমস্ত অভ্যন্তরীণ রূপগুলি (ধূসর ভাষায় নির্দেশিত) স্বয়ংক্রিয়ভাবে ব্রাউজার দ্বারা নিকটতম বৈকল্পিকটিতে ম্যাপ করা হয়।

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

সিএসএস ফন্ট ম্যাচিং অ্যালগরিদম

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

@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;
}

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

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

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

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

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

বৃহত্তম কন্টেন্টফুল পেইন্ট (এলসিপি) এবং ক্রমবর্ধমান লেআউট শিফট (সিএলএস) এর উপর প্রভাব

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

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

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