اگه طراحی وب انجام داده باشین قطعاً میدونین که توی چند سال اخیر کمتر طراح قابلی هست که از فونت‌ مزخرفی مثل Tahoma استفاده کنه و از وقتی مرورگر‌ها توانایی استفاده از وب فونت‌ها در قالب‌های CSS از طریق font-face@ را پیدا کرده‌اند عموما طراح بسته به کار خودش از فونت مورد نظرش استفاده میکنه.

یک مشکلی که شاید خیلی‌ها بهش بر خورده باشن این هست که برخی فونت‌ها برای استایل های Bold یا Italic و حتی ترکیب این دو Style ، فایل‌های متفاوت دارن ولی طراح چون نمیخواسته توی CSS بیاد و خودش را درگیر عنوان های متفاوت از font-face برای یک فونت بکنه عموما از نسخه Regular استفاده میکرده و تغییر Style را به عهده مرورگر میگذاشته !

خودم اخیراً توی پروژه ای نیاز به این کار داشتم و گفتم بیام یک پست بگذارم روی وبلاگ تا دوستان دیگه هم استفاده کنن:

@font-face {
	font-family: 'DroidNaskh';
	src: url('/assets/fonts/DroidNaskh-Regular.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
}
@font-face {
	font-family: 'DroidNaskh';
	src: url('/assets/fonts/DroidNaskh-Italic.ttf') format('truetype');
	font-weight: normal;
	font-style: italic;
 }
@font-face {
	font-family: 'DroidNaskh';
	src: url('/assets/fonts/DroidNaskh-Bold.ttf') format('truetype');
	font-weight: bold;
	font-style: normal;
}
@font-face {
	font-family: 'DroidNaskh';
	src: url('/assets/fonts/DroidNaskh-Italic-Bold.ttf') format('truetype');
	font-weight: bold;
	font-style: italic;
}

حالا کافیه از همون DroidNaskh استفاده کنیم و مرورگر به صورت خودکار خودش برای Style ها مختلف از فونت‌های متناظر استفاده خواهد کرد.