ویژگی font-family
فونت مورد استفاده برای محتوای عناصر را مشخص می کند.
بطور دقیق تر این ویژگی یک لیست اولویت دار از نام فونت های مختلف را برای استفاده عناصر تعریف می کند.

نام فونت ها بوسیله ویرگول از هم جدا می شوند. و نکته خیلی مهم این است که فونت ها نقش جایگزین برای هم را بازی می کنند.
مرورگر فونتی را انتخاب می کند که یا روی کامپیوتر نصب باشد و یا از طریق اطلاعاتی که توسط دستور @font-face فراهم شده است، قابل دانلود باشد.
p {
font-family: WYekan, Tahoma, Arial;
}
مرورگر در ابتدا فونت اول از لیست (WYekan) را اعمال می کند، اگر این فونت نامعتبر باشد یا وجود نداشته باشد و یا به هر دلیلی قابل دانلود نباشد، به سراغ فونت دوم و سپس فونت سوم می رود. اگر هیچ یک از فونت های مشخص شده در دسترس نباشد مرورگر فونت پیشفرض سیستم را مورد استفاده قرار می دهد.
برای ویژگی font-family
می توان از دو نوع نام استفاده کرد.
نام فونت های واقعی
نوع اول همان نام فونت های واقعی مثل Tahoma، Helvetica و غیره می باشند. توجه داشته باشیم که نام فونت های واقعی اگر دارای عدد و کاراکترهای خاص هستند و یا تشکیل شده از دو و یا چند کلمه می باشند باید در علامت نقل قول (" "
یا ' '
) قرار بگیرند.
ولی اگر نام فونت از حروف عمومی تشکیل شده و فقط دارای یک کلمه است می تواند بدون علامت های گفته شده مورد استفاده قرار بگیرد.
موارد زیر نادرست می باشند:
font-family: Red/Black, sans-serif;
font-family: "Lucida" Grande, sans-serif;
font-family: Ahem!, sans-serif;
font-family: test@foo, sans-serif;
font-family: #POUND, sans-serif;
font-family: Hawaii 5-0, sans-serif;
موارد زیر قابل قبول و صحیح هستند:
font-family: "New Century Schoolbook", serif;
font-family: "21st Century", fantasy;
font-family: "test@foo", sans-serif;
نام فونت های Generic
نوع دوم نام فونت های Generic هستند که معمولا از آنها به عنوان فونت پشتیبان مورد استفاده قرار می گیرد. یعنی اگر به هر دلیلی مرورگر دسترسی به فونت تعریف شده نداشته باشد از آنها استفاده کند.
این کلمات کلیدی شامل موارد زیر می باشند:
- serif
- sans-serif
- cursive
- fantasy
- monospace
توصیه می شود که همیشه یکی از این فونت ها را در انتهای لیست ویژگی font-family
قرار دهیم.
این نوع نام فونت ها معمولا کلمات کلیدی هستند. و از آنجایی که نباید کلمات کلیدی در علامت نقل قول قرار بگیرند، برای این نوع علامت نقل قول قرار نمی دهیم.
حال اگر نام یک فونت واقعی دقیقا برابر با یکی از این کلمات کلیدی بود برای جلوگیری از گیج شدن مرورگر اگر نام مربوط به فونت واقعی هست آن را در علامت نقل قول قرار می دهیم.
font-family: "serif"; /* فونت واقعی به نام سریف */
font-family: serif; /* کلمه کلیدی سریف که مربوط به نوع دوم و پشتیبان می باشد */
serif
این نوع فونت بیشتر حالت رسمی دارد. معمولا گلیف ها دندانه دار هستند و همینطور معمولا فاصله بین آنها منظم است.

sans-serif
این نوع بر خلاف نوع serif
لبه های ساده دارند و همینطور ضخامت بدنه های گلیف تقریبا یکسان می باشد.

cursive
این نوع بیشتر حالت غیر رسمی دارد و نتیجه بیشتر شبیه دست خط می باشد.

fantasy
همانطور که از نام این نوع پیداست بیشتر جنبه دکور و زیباسازی دارد و بیشتر برای عناوین بزرگ مورد استفاده قرار می گیرند.

monospace
مشخصه نوع monospace
این است که عرض تمام گلیف ها یکسان می باشد. از این نوع بیشتر برای نوشتن کد استفاده می شود.

چند نمونه از تعریف مقادیر برای ویژگی font-family
:
font-family: "Arial";
font-family: "Open Sans", sans-serif;
font-family: "Helvetica", Verdana, sans-serif;
font-family: "21st Century", fantasy;
در مثال دوم دموی زیر نحوه مقدار دهی به این ویژگی نامعتبر است به همین دلیل فونت مورد نظر مورد استفاده قرار نگرفته است:
