এই পৃষ্ঠাটি Cloud Translation API অনুবাদ করেছে।

ফন্টের জন্য সর্বোত্তম অনুশীলন

Core Web Vitals-এর জন্য ওয়েব ফন্ট অপ্টিমাইজ করুন।

Katie Hempenius

Barry Pollard

এই নথিটি ফন্টের জন্য কর্মক্ষমতার সর্বোত্তম অনুশীলন নিয়ে আলোচনা করে। ওয়েব ফন্ট কর্মক্ষমতা প্রভাবিত করার বিভিন্ন উপায় আছে:

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

এই নথিটির তিনটি বিভাগ রয়েছে: ফন্ট লোডিং , ফন্ট বিতরণ এবং ফন্ট রেন্ডারিং ৷ প্রতিটি বিভাগ ব্যাখ্যা করে যে ফন্টের জীবনচক্রের সেই বিশেষ দিকটি কীভাবে কাজ করে এবং সংশ্লিষ্ট সেরা অনুশীলনগুলি প্রদান করে।

ফন্ট লোড হচ্ছে

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

আপনার পৃষ্ঠার ফন্টগুলি সময়মতো অনুরোধ করা হচ্ছে কিনা তা আপনি যদি নিশ্চিত না হন তবে আরও তথ্যের জন্য Chrome DevTools-এর নেটওয়ার্ক প্যানেলের মধ্যে টাইমিং ট্যাবটি দেখুন৷

DevTools-এ টাইমিং ট্যাব।

`@font-face` বুঝুন

ফন্ট লোড করার সর্বোত্তম অনুশীলনে ডুব দেওয়ার আগে @font-face কীভাবে কাজ করে এবং এটি ফন্ট লোডিংকে কীভাবে প্রভাবিত করে তা বোঝা গুরুত্বপূর্ণ।

@font-face ঘোষণা যেকোনো ওয়েব ফন্টের সাথে কাজ করার একটি অপরিহার্য অংশ। সর্বনিম্নভাবে, এটি ফন্টের উল্লেখ করতে ব্যবহৃত নাম ঘোষণা করে এবং সংশ্লিষ্ট ফন্ট ফাইলের অবস্থান নির্দেশ করে।

@font-face {
  font-family: "Open Sans";
  src: url("/fonts/OpenSans-Regular-webfont.woff2") format("woff2");
}

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

@font-face {
  font-family: "Open Sans";
  src: url("/fonts/OpenSans-Regular-webfont.woff2") format("woff2");
}

h1 {
  font-family: "Open Sans"
}

এই উদাহরণে, Open Sans শুধুমাত্র ডাউনলোড করা হবে যদি পৃষ্ঠাটিতে একটি <h1> উপাদান থাকে।

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

ইনলাইন ফন্ট ঘোষণা

বেশিরভাগ সাইটগুলি একটি বহিরাগত স্টাইলশীটে অন্তর্ভুক্ত করার পরিবর্তে মূল নথির <head> -এ ফন্ট ঘোষণা এবং অন্যান্য সমালোচনামূলক স্টাইলিং ইনলাইন করে দৃঢ়ভাবে উপকৃত হবে। এটি ব্রাউজারটিকে শীঘ্রই ফন্টের ঘোষণাগুলি আবিষ্কার করতে দেয় কারণ ব্রাউজারটিকে বাহ্যিক স্টাইলশীট ডাউনলোড করার জন্য অপেক্ষা করতে হবে না।

<head>
  <style>
    @font-face {
        font-family: "Open Sans";
        src: url("/fonts/OpenSans-Regular-webfont.woff2") format("woff2");
    }

    body {
        font-family: "Open Sans";
    }

    ...etc.

  </style>
</head>

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

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

সমালোচনামূলক তৃতীয় পক্ষের উত্সের সাথে পূর্ব সংযোগ করুন৷

আপনার সাইট যদি কোনো তৃতীয় পক্ষের সাইট থেকে ফন্ট লোড করে, তাহলে এটি অত্যন্ত সুপারিশ করা হয় যে আপনি তৃতীয় পক্ষের উৎসের সাথে প্রাথমিক সংযোগ স্থাপন করতে preconnect সংস্থান ইঙ্গিতটি ব্যবহার করুন। সম্পদের ইঙ্গিতগুলি নথির <head> এ স্থাপন করা উচিত। নিম্নলিখিত সংস্থান ইঙ্গিত ফন্ট স্টাইলশীট লোড করার জন্য একটি সংযোগ সেট আপ করে।

<head>
  <link rel="preconnect" href="https://fonts.com">
</head>

ফন্ট ফাইল ডাউনলোড করতে ব্যবহৃত সংযোগটি পূর্ব-সংযোগ করতে, একটি পৃথক preconnect রিসোর্স ইঙ্গিত যোগ করুন যা crossorigin অ্যাট্রিবিউট ব্যবহার করে। স্টাইলশীটের বিপরীতে, ফন্ট ফাইলগুলি অবশ্যই একটি CORS সংযোগের মাধ্যমে পাঠাতে হবে।

<head>
  <link rel="preconnect" href="https://fonts.com">
  <link rel="preconnect" href="https://fonts.com" crossorigin>
</head>

preconnect রিসোর্স ইঙ্গিত ব্যবহার করার সময়, মনে রাখবেন যে একটি ফন্ট প্রদানকারী পৃথক উত্স থেকে স্টাইলশীট এবং ফন্টগুলি পরিবেশন করতে পারে। উদাহরণস্বরূপ, Google ফন্টের জন্য এইভাবে preconnect রিসোর্স ইঙ্গিত ব্যবহার করা হবে।

<head>
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
</head>

ফন্ট লোড করার জন্য `preload` ব্যবহার করার সময় সতর্ক থাকুন

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

ইনলাইন ফন্ট ঘোষণা এবং স্টাইলশীট সামঞ্জস্য একটি আরো কার্যকর পদ্ধতি হতে পারে. এই সামঞ্জস্যগুলি দেরিতে আবিষ্কৃত ফন্টগুলির মূল কারণটি সমাধানের কাছাকাছি আসে, কেবলমাত্র একটি সমাধান প্রদান করার পরিবর্তে।

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

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

ফন্ট ডেলিভারি

দ্রুত ফন্ট ডেলিভারি দ্রুত টেক্সট রেন্ডারিং প্রদান করে। উপরন্তু, যদি একটি ফন্ট যথেষ্ট তাড়াতাড়ি বিতরণ করা হয়, এটি ফন্ট অদলবদল থেকে সৃষ্ট লেআউট পরিবর্তনগুলি দূর করতে সাহায্য করতে পারে।

স্ব-হোস্টেড ফন্ট ব্যবহার করুন

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

আপনি যদি স্ব-হোস্টেড ফন্ট ব্যবহার করার কথা ভাবছেন, তাহলে নিশ্চিত করুন যে আপনার সাইটটি একটি কন্টেন্ট ডেলিভারি নেটওয়ার্ক (CDN) এবং HTTP/2 ব্যবহার করে। এই প্রযুক্তিগুলি ব্যবহার না করে, স্ব-হোস্ট করা ফন্টগুলি আরও ভাল পারফরম্যান্স সরবরাহ করার সম্ভাবনা অনেক কম।

দ্রষ্টব্য: যদি আপনি নিশ্চিত না হন যে স্ব-হোস্টেড ফন্টগুলি ব্যবহার করলে আরও ভাল কার্যকারিতা পাওয়া যায়, আপনার নিজের সার্ভার থেকে একটি ফন্ট ফাইল পরিবেশন করার চেষ্টা করুন এবং একটি তৃতীয় পক্ষের ফন্টের সাথে স্থানান্তর সময় (সংযোগ সেটআপ সহ) তুলনা করুন৷ আপনার যদি ধীরগতির সার্ভার থাকে, তাহলে CDN বা HTTP/2 ব্যবহার করবেন না, কারণ স্ব-হোস্ট করা ফন্টটি আরও কার্যকর হওয়ার সম্ভাবনা কম।

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

WOFF2 ব্যবহার করুন

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

ব্রাউজার সমর্থন দেওয়া, বিশেষজ্ঞরা এখন শুধুমাত্র WOFF2 ব্যবহার করার পরামর্শ দেন:

প্রকৃতপক্ষে, আমরা মনে করি এটি ঘোষণা করারও সময়: শুধুমাত্র WOFF2 ব্যবহার করুন এবং অন্য সবকিছু ভুলে যান।

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

সাবসেট ফন্ট

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

@font-face ঘোষণায় unicode-range বর্ণনাকারী ব্রাউজারকে জানায় যে কোন অক্ষরের জন্য ফন্ট ব্যবহার করা যেতে পারে।

@font-face {
    font-family: "Open Sans";
    src: url("/fonts/OpenSans-Regular-webfont.woff2") format("woff2");
    unicode-range: U+0025-00FF;
}

পৃষ্ঠায় ইউনিকোড পরিসরের সাথে মিলে যাওয়া এক বা একাধিক অক্ষর থাকলে একটি ফন্ট ফাইল ডাউনলোড করা হয়। unicode-range সাধারণত পৃষ্ঠা বিষয়বস্তুর দ্বারা ব্যবহৃত ভাষার উপর নির্ভর করে বিভিন্ন ফন্ট ফাইল পরিবেশন করতে ব্যবহৃত হয়।

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

প্রতি ফন্টে গ্লিফের সংখ্যা ব্যাপকভাবে পরিবর্তিত হয়:

ল্যাটিন হরফগুলি সাধারণত প্রতি ফন্টে 100 থেকে 1000 গ্লিফের মাত্রায় থাকে।
CJK ফন্টে 10,000-এর বেশি অক্ষর থাকতে পারে।

অব্যবহৃত গ্লিফ অপসারণ উল্লেখযোগ্যভাবে একটি ফন্ট ফাইলের আকার কমাতে পারে.

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

/* devanagari */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/poppins/v20/pxiEyp8kv8JHgFVrJJbecnFHGPezSQ.woff2) format('woff2');
  unicode-range: U+0900-097F, U+1CD0-1CF6, U+1CF8-1CF9, U+200C-200D, U+20A8, U+20B9, U+25CC, U+A830-A839, U+A8E0-A8FB;
}
/* latin-ext */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/poppins/v20/pxiEyp8kv8JHgFVrJJnecnFHGPezSQ.woff2) format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/poppins/v20/pxiEyp8kv8JHgFVrJJfecnFHGPc.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

স্ব-হোস্টিং-এ যাওয়ার সময়, এটি একটি অপ্টিমাইজেশান যা মিস করা যায় এবং স্থানীয়ভাবে বড় ফন্ট ফাইলের দিকে নিয়ে যায়।

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

সর্বদা ফন্ট লাইসেন্স পরীক্ষা করে নিশ্চিত করুন যে তারা সাবসেটিং এবং স্ব-হোস্টিংয়ের অনুমতি দেয় ।

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

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

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

আপনার CSS-এ সিস্টেম ফন্ট ব্যবহার করতে, system-ui ফন্ট-পরিবার হিসেবে তালিকাভুক্ত করুন:

font-family: system-ui

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

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

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

ফন্ট রেন্ডারিং

যখন এমন একটি ওয়েব ফন্টের মুখোমুখি হয় যা এখনও লোড হয়নি, তখন ব্রাউজারটি একটি দ্বিধাগ্রস্ততার সম্মুখীন হয়: ওয়েব ফন্ট না আসা পর্যন্ত পাঠ্য রেন্ডারিং বন্ধ রাখা উচিত? নাকি ওয়েব ফন্ট না আসা পর্যন্ত পাঠ্যটিকে ফলব্যাক ফন্টে রেন্ডার করা উচিত?

বিভিন্ন ব্রাউজার এই দৃশ্যকে ভিন্নভাবে পরিচালনা করে। ডিফল্টরূপে, ক্রোমিয়াম-ভিত্তিক এবং ফায়ারফক্স ব্রাউজার 3 সেকেন্ড পর্যন্ত পাঠ্য রেন্ডারিং ব্লক করে যদি সংশ্লিষ্ট ওয়েব ফন্ট লোড না হয়। সাফারি অনির্দিষ্টকালের জন্য পাঠ্য রেন্ডারিং ব্লক করে।

এই আচরণটি font-display অ্যাট্রিবিউট ব্যবহার করে কনফিগার করা যেতে পারে। এই পছন্দের উল্লেখযোগ্য প্রভাব থাকতে পারে: font-display LCP, FCP, এবং লেআউট স্থায়িত্বকে প্রভাবিত করার সম্ভাবনা রয়েছে।

একটি উপযুক্ত `font-display` কৌশল বেছে নিন

font-display ব্রাউজারকে জানিয়ে দেয় কিভাবে এটি টেক্সট রেন্ডারিং এর সাথে এগিয়ে যেতে হবে যখন সংশ্লিষ্ট ওয়েব ফন্ট লোড না হয়। এটি প্রতি ফন্ট-ফেস দ্বারা সংজ্ঞায়িত করা হয়েছে।

@font-face {
  font-family: Roboto, Sans-Serif
  src: url(/fonts/roboto.woff) format('woff'),
  font-display: swap;
}

font-display জন্য পাঁচটি সম্ভাব্য মান রয়েছে:

মান	ব্লক পিরিয়ড	অদলবদল সময়কাল
অটো	ব্রাউজার দ্বারা পরিবর্তিত হয়	ব্রাউজার দ্বারা পরিবর্তিত হয়
ব্লক	2-3 সেকেন্ড	অসীম
অদলবদল	0ms	অসীম
ফলব্যাক	100ms	3 সেকেন্ড
ঐচ্ছিক	100ms	কোনোটিই নয়

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

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

বেশিরভাগ সাইটের জন্য, এই তিনটি সবচেয়ে প্রযোজ্য কৌশল, আপনার শীর্ষ অগ্রাধিকারের উপর ভিত্তি করে:

কর্মক্ষমতা : font-display: optional । এটি হল সবচেয়ে "পারফরম্যান্স" পদ্ধতি: টেক্সট রেন্ডার 100ms এর বেশি বিলম্বিত হয় না এবং ফন্ট-অদলবদল সম্পর্কিত লেআউট স্থানান্তর না হওয়ার নিশ্চয়তা রয়েছে। নেতিবাচক দিক হল যে ওয়েব ফন্টটি দেরিতে পৌঁছালে ব্যবহার করা হবে না।
দ্রুত পাঠ্য প্রদর্শন করুন এবং এখনও একটি ওয়েব-ফন্ট ব্যবহার করুন : font-display: swap ব্যবহার করুন তবে নিশ্চিত করুন যে ফন্টটি যথেষ্ট তাড়াতাড়ি বিতরণ করুন যাতে এটি লেআউট পরিবর্তনের কারণ না হয়। এই বিকল্পের নেতিবাচক দিক হল ফন্টটি দেরীতে আসার সময় ঝাঁকুনি পরিবর্তন।
টেক্সট একটি ওয়েব ফন্টে প্রদর্শিত হয় : font-display: block ব্যবহার করুন তবে ফন্টটি যথেষ্ট তাড়াতাড়ি বিতরণ করার বিষয়টি নিশ্চিত করুন যাতে এটি পাঠ্যের বিলম্বকে কমিয়ে দেয়। প্রাথমিক পাঠ্য প্রদর্শন বিলম্বিত হয়. এই বিলম্ব সত্ত্বেও, এটি এখনও একটি লেআউট পরিবর্তনের কারণ হতে পারে কারণ পাঠ্যটি আসলে অদৃশ্য আঁকা হয়, এবং ফলব্যাক ফন্ট স্পেসটি তাই স্থান সংরক্ষিত করতে ব্যবহৃত হয়। একবার ওয়েব ফন্ট লোড হয়ে গেলে, এর জন্য পার্থক্য স্থানের প্রয়োজন হতে পারে, তাই একটি স্থানান্তর। এটি font-display: swap চেয়ে কম ঝাঁকুনিপূর্ণ শিফট হতে পারে, কারণ টেক্সট নিজেই স্থানান্তরিত হতে দেখা যাবে না।

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

এছাড়াও মনে রাখবেন যে এই দুটি পদ্ধতি একত্রিত করা যেতে পারে: উদাহরণস্বরূপ, ব্র্যান্ডিং এবং অন্যান্য দৃশ্যত স্বতন্ত্র পৃষ্ঠা উপাদানগুলির জন্য font-display: swap ব্যবহার করুন। font-display: optional ।

আইকন ফন্ট

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

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

আপনার ফলব্যাক ফন্ট এবং আপনার ওয়েবফন্টের মধ্যে স্থানান্তর হ্রাস করুন

CLS প্রভাব কমাতে, আপনি size-adjust বৈশিষ্ট্যগুলি ব্যবহার করতে পারেন।

উপসংহার

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