با استفاده از font face می توانید فونت معمولی سایت خود را به هر فونت دلخواهی تغییر دهید. استفاده از فونت فارسی مناسب تاثیر بسیار زیادی در خوانایی متون داخل وب سایت شما دارد.

برای این که آموزش تغییر فونت وب سایت را ادامه دهیم باید فونت bbadr مخصوص وب را از وب سایت های دانلود فونت دانلود کنید. فایل فونت را در در بین فایل های سایت خود قرار بدهید.

کد زیر را میتوانید در ابتدای فایل css خود وارد کرده یا در فایل html وارد کنید.

در ابتدای فایل css:

@font-face {
font-family: 'BBadr';
src:
url('fonts/BBadr.eot?#') format('eot'), /* IE6–8 */
url('fonts/BBadr.woff') format('woff'), /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
url('fonts/BBadr.ttf') format('truetype'); /* Saf3—5, Chrome4+, FF3.5, Opera 10+ */}

در فایل html:

<style type="text/css" media="all">
@font-face {
font-family: 'BBadr';
src: url('fonts/BBadr.eot?#') format('eot'), /* IE6–8 */
url('fonts/BBadr.woff') format('woff'), /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
url('fonts/BBadr.ttf') format('truetype'); /* Saf3—5, Chrome4+, FF3.5, Opera 10+ */}
</style>

توجه کنید که برای هر فونتی که میخواهید استفاده کنید باید این کار را انجام دهید. در این مثال فونت BBadr اضافه شده است. برای اضافه کردن هر |فونت جدید فقط کافیست این خطوط را کپی کنید و نام فونت جدید را جایگزین کنید. در بخش آموزش طراحی سایت هانت بیشتر می توانید با اصول طراحی سایت آشنا شوید.

حال کافیست فونت را برای تگ مربوطه ست کنید.
برای مثال می‌توانید فونت اصلی بدنه را در فایل css اینگونه تعریف کنید.

body {font-family: 'BBadr';}