فونت‌گذاری در CSS یکی از مسائل مهمی است که تاثیر زیادی روی ظاهر و خوانایی وب‌سایت‌ها دارد. انتخاب و استفاده از فونت مناسب می‌تواند تاثیر مثبتی بر روی تجربه کاربری و جذابیت بصری وب‌سایت داشته باشد. در این بخش به موضوعات مختلفی درباره‌ی نحوه‌ی بارگذاری و استفاده از فونت‌ها در وب‌سایت‌ها می‌پردازیم.
در جامعه‌ی برنامه‌نویسی، استفاده از فونت‌های زیبا و جذاب همیشه مورد توجه بوده است. به عنوان مثال، استفاده از فونت‌های گوگل یکی از روش‌های محبوب برای بهبود ظاهر وب‌سایت‌هاست. با این حال، برای استفاده بهینه از فونت‌ها باید تکنیک‌های بارگذاری آن‌ها را نیز بدانیم.
یک روش برای بهینه‌سازی بارگذاری فونت‌ها، استفاده از تکنیک‌هایی مثل lazy loading و preloading است. این تکنیک‌ها به شما اجازه می‌دهند تا فونت‌ها تنها زمانی که لازم است بارگذاری شوند و یا به نحو سریع‌تری در دسترس قرار گیرند.
در ادامه یک نمونه کد برای بارگذاری فونت به وسیله‌ی CSS ارائه می‌دهیم. همچنین توضیحات خط به خط از کد را نیز برای درک بهتر ارائه خواهیم کرد.
<style>
@font-face {
font-family: 'MyCustomFont';
src: url('my-custom-font.woff2') format('woff2'),
url('my-custom-font.woff') format('woff');
font-weight: normal;
font-style: normal;
font-display: swap;
}
body {
font-family: 'MyCustomFont', sans-serif;
}
</style>
توضیحات کد
@font-face: این دستور اجازه می‌دهد تا یک فونت سفارشی به وب‌سایت اضافه شود. font-family: نامی که به این فونت اختصاص داده‌اید و از آن برای ارجاع در CSS استفاده می‌کنید. src: مسیر فایل‌های فونت که می‌تواند در فرمت‌های مختلف مانند woff2 و woff باشد. font-weight و font-style: تعیین وزن و سبک فونت که می‌تواند normal, bold و غیره باشد. font-display: گزینه‌ای که نحوه نمایش فونت در حالت بارگذاری را مشخص می‌کند، مانند swap که از جایگزین موقت استفاده می‌کند. body: در اینجا فونت سفارشی تعریف شده برای کل بدنه وب‌سایت اعمال می‌شود.