স্ব-হোস্টেড ফন্ট হল ফন্ট ফাইল যা আপনার নিজস্ব সার্ভার থেকে পরিবেশন করা হয় - তৃতীয় পক্ষের ফন্ট প্রদানকারীর পরিবর্তে (উদাহরণস্বরূপ, Google ফন্ট)।
ফন্টগুলি দ্রুত সরবরাহ করা অবিশ্বাস্যভাবে গুরুত্বপূর্ণ: দ্রুত ফন্ট বিতরণের অর্থ কেবলমাত্র পাঠ্যটি ব্যবহারকারীর কাছে শীঘ্রই দৃশ্যমান হবে না - তবে এটি একটি ফন্ট লেআউট পরিবর্তনের কারণ কিনা তার উপরও একটি বড় প্রভাব ফেলে৷ যদি একটি ফন্ট প্রয়োজনের আগে বিতরণ করা না যায়, তবে ফন্টটি অদলবদল করার সময় সাধারণত একটি বিন্যাস পরিবর্তন হবে। ফলব্যাক ফন্টটি ওয়েব ফন্টের সাথে কতটা ঘনিষ্ঠভাবে মেলে তার উপর নির্ভর করে এই লেআউট শিফটের আকার পরিবর্তিত হতে পারে। এই ঘটনাটি কার্যকরভাবে দেখতে, ডেমো দেখুন এবং একটি দ্রুত সংযোগ বনাম একটি ধীর সংযোগে ঘটে যাওয়া বিন্যাস পরিবর্তনের তুলনা করুন।
নীচের উদাহরণটি যত তাড়াতাড়ি সম্ভব একটি স্ব-হোস্টেড ফন্ট সরবরাহ করার জন্য দুটি কর্মক্ষমতা কৌশলকে একত্রিত করেছে: ইনলাইন ফন্ট ঘোষণার ব্যবহার এবং WOFF2 ফন্ট ফর্ম্যাটের ব্যবহার।
ইনলাইন ফন্ট ডিক্লেয়ারেশন : মূল ডকুমেন্টে
@font-faceএবংfont-familyডিক্লারেশন ইনলাইন করা, এই তথ্যগুলিকে এক্সটার্নাল স্টাইলশীটে অন্তর্ভুক্ত করার পরিবর্তে, ব্রাউজারকে আলাদা করে অপেক্ষা না করেই পৃষ্ঠায় কোন ফন্ট ফাইলগুলি ব্যবহার করা হবে তা নির্ধারণ করতে দেয়। স্টাইলশীট ফাইল ডাউনলোড করতে। এটি গুরুত্বপূর্ণ কারণ সাধারণত ব্রাউজাররা ফন্ট ফাইল ডাউনলোড করবে না যতক্ষণ না তারা জানে যে সেগুলি পৃষ্ঠায় ব্যবহার করা হয়েছে। বেশিরভাগ পরিস্থিতিতে, ইনলাইন ফন্ট ঘোষণাগুলি ফন্ট লোড করার জন্যpreloadব্যবহার করার চেয়ে পছন্দনীয় ।WOFF2 : আধুনিক ফন্ট ফন্টগুলির মধ্যে, WOFF2 হল সবথেকে নতুন, সবচেয়ে প্রশস্ত ব্রাউজার সমর্থন রয়েছে এবং সেরা কম্প্রেশন অফার করে। কারণ এটি ব্রোটলি ব্যবহার করে, WOFF2 WOFF এর চেয়ে 30% ভাল সংকুচিত করে।
কর্মক্ষমতা আরও উন্নত করতে, ফন্ট সাবসেটিং ব্যবহার করার কথা বিবেচনা করুন। ফন্ট সাবসেটিং হল একটি ফন্ট ফাইলকে ছোট সাবসেটে বিভক্ত করার অভ্যাস - সাধারণত অব্যবহৃত গ্লিফ অপসারণের লক্ষ্যে। এটি একটি ফন্টের ফাইলের আকার উল্লেখযোগ্যভাবে হ্রাস করতে পারে। ফন্ট সাবসেট তৈরির সরঞ্জামগুলির মধ্যে রয়েছে ফন্টকিট , সাবফন্ট এবং গ্লাইফহ্যাঙ্গার ।
স্ব-হোস্ট করা ফন্টগুলির জন্য সর্বোত্তম অনুশীলন সম্পর্কে আরও তথ্যের জন্য, স্ব-হোস্টেড ফন্ট ব্যবহার করা দেখুন।
উদাহরণ:
এইচটিএমএল
<head>
<style>
@font-face {
font-family: 'Google Sans';
src: url("Google Sans.woff2") format('woff2');
font-display: swap;
}
body {
font-family: system-ui;
font-size: 1em;
}
h1 {
font-family: 'Google Sans', sans-serif;
font-size: 3em;
}
</style>
</head>