ফন্টগুলি দ্রুত সরবরাহ করা অবিশ্বাস্যভাবে গুরুত্বপূর্ণ: দ্রুত ফন্ট বিতরণের অর্থ কেবলমাত্র পাঠ্যটি ব্যবহারকারীর কাছে শীঘ্রই দৃশ্যমান হবে না - তবে এটি একটি ফন্ট লেআউট পরিবর্তনের কারণ কিনা তার উপরও একটি বড় প্রভাব ফেলে৷ যদি একটি ফন্ট প্রয়োজনের আগে বিতরণ করা না যায়, তবে ফন্টটি অদলবদল করার সময় সাধারণত একটি বিন্যাস পরিবর্তন হবে। ফলব্যাক ফন্টটি ওয়েব ফন্টের সাথে কতটা ঘনিষ্ঠভাবে মেলে তার উপর নির্ভর করে এই লেআউট শিফটের আকার পরিবর্তিত হতে পারে। এই ঘটনাটি কার্যকরভাবে দেখতে, ডেমো দেখুন এবং একটি দ্রুত সংযোগ বনাম একটি ধীর সংযোগে ঘটে যাওয়া বিন্যাস পরিবর্তনের তুলনা করুন।
নীচের উদাহরণটি একটি তৃতীয় পক্ষের ফন্ট যত তাড়াতাড়ি সম্ভব লোড করার জন্য দুটি কর্মক্ষমতা কৌশলকে একত্রিত করেছে: ইনলাইন ফন্ট ঘোষণার ব্যবহার এবং preconnect রিসোর্স ইঙ্গিতের ব্যবহার। যদিও এই কোড স্নিপেটটি দেখায় কিভাবে Google Fonts থেকে ফন্ট লোড করতে হয়, এই কৌশলগুলি অন্যান্য তৃতীয় পক্ষের ফন্ট প্রদানকারীদের ক্ষেত্রেও প্রযোজ্য।
ইনলাইন ফন্ট ঘোষণা : একটি বাহ্যিক স্টাইলশীটে এই তথ্যটি অন্তর্ভুক্ত করার পরিবর্তে প্রধান নথিতে
font-familyঘোষণাগুলি ইনলাইন করা ব্রাউজারকে একটি পৃথক স্টাইলশীট ফাইল ডাউনলোড করার জন্য অপেক্ষা না করে পৃষ্ঠায় কোন ফন্ট ফাইলগুলি ব্যবহার করা হবে তা নির্ধারণ করতে দেয়৷ এটি গুরুত্বপূর্ণ কারণ সাধারণত ব্রাউজাররা ফন্ট ফাইল ডাউনলোড করবে না যতক্ষণ না তারা জানে যে সেগুলি পৃষ্ঠায় ব্যবহার করা হয়েছে। বেশিরভাগ পরিস্থিতিতে, ইনলাইন ফন্ট ঘোষণাগুলি ফন্ট লোড করার জন্যpreloadব্যবহার করার চেয়ে পছন্দনীয় ।প্রি-কানেক্ট : Google ফন্ট লোড করার প্রস্তাবিত উপায় হল
preconnectরিসোর্স ইঙ্গিতগুলির সাথে একত্রে<link>ট্যাগ ব্যবহার করা।preconnectরিসোর্স ইঙ্গিত তৃতীয় পক্ষের উত্সের সাথে একটি প্রাথমিক সংযোগ স্থাপন করে। নীচের কোড স্নিপেটে, প্রথম রিসোর্স ইঙ্গিত ফন্ট স্টাইলশীট ডাউনলোড করার জন্য একটি সংযোগ সেট আপ করে; দ্বিতীয় রিসোর্স ইঙ্গিত ফন্ট ফাইল ডাউনলোড করার জন্য একটি সংযোগ সেট আপ করে।
উদাহরণ:
এইচটিএমএল
<head>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Zen+Tokyo+Zoo&display=swap" rel="stylesheet">
<style>
body {
font-family: system-ui;
font-size: 1em;
}
h1 {
font-family: 'Zen Tokyo Zoo', sans-serif;
font-size: 3em;
}
</style>
</head>