فونت های سفارشی (Custom Fonts)
اینجا با «فونت سفارشی (Custom Font)» آشنا می شویم. فونت سفارشی یعنی فونتی که روی سیستم کاربر نصب نیست. اما با قانون @font-face آن را لود می کنیم. سپس با font-family از همان نام استفاده می کنیم.
@font-face؛ پایه فونت سفارشی
قانون @font-face اجازه می دهد فایل فونت را از سرور بخوانیم. سپس یک نام دلخواه می دهیم و بعد در عناصر صفحه استفاده می کنیم.
@font-face {\n font-family: myFont;\n src: url(sansation_light.woff);\n}\n\np {\n font-family: myFont;\n}\n
نکته: فایل فونت باید روی سرور باشد. مرورگر هنگام نیاز دانلود می کند.
فرمت های رایج فونت وب
برای وب، WOFF/WOFF2 سبک و مناسب هستند. TTF/OTF روی دسکتاپ رایج اند، اما برای وب بهینه نیستند.
وزن ها و سبک ها با قوانین جدا
برای بولد یا ایتالیک، باید قانون @font-face جدا بسازیم. این گونه مرورگر فایل درست را انتخاب می کند.
@font-face {\n font-family: myFont;\n src: url(sansation_bold.woff);\n font-weight: bold;\n}\n
مراحل عملی استفاده از فونت سفارشی
- فایل های فونت را در سرور آپلود کن.
- برای هر وزن/استایل یک @font-face بساز.
- نام واحد برای خانواده انتخاب کن.
- در CSS با font-family از آن نام استفاده کن.
برای نمایش بهتر متن ها، بخش افکت های متن را ببین. همچنین برای چینش واکنش گرا، صفحه طراحی واکنش گرا مفید است.
جمع بندی سریع
- @font-face فونت را از سرور لود می کند.
- برای بولد/ایتالیک قوانین جدا بساز.
- WOFF/WOFF2 برای وب مناسب ترند.
- یک نام ثابت برای همه وزن ها بده.