شاید تا بحال سایت هایی رو دیده باشید که از فونت هایی خاص برای طراحی صفحات خود استفاده می کنند.همان طور که می دانید برای طراحی سایت  مجاز به استفاده از هر فونتی نمی باشیم.این محدودیت برای پارسی زبان ها نیز وجود دارد و معمولا از فونت های  Times New Roman و Tahoma برای طراحی سایت استفاده می کنند.

اما این محدویت در CSS3 بر طرف شده و شما می توانید از هر فونتی که می خواهید در طراحی سایت خود استفاده کنید.

برای این منظور از دستور  font-face@ برای تعریف فونت در فایل CSS استفاده می شود.

برای شروع کد زیر را به فایل CSS اضافه می کنیم.

@font-face

{

    font-family: myfont;

    src: url('../Fonts/BTitrBd.ttf'), /* non-IE */

    url('../Fonts/BTitrBd.eot') format("opentype"); /* IE */

}

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

url:در این قسمت مسیر فایل موردنظر جهت استفاده از فونت تعیین می شود.

مرورگر های Opera,Firefox,Chrome,Safari از هر دو نوع فونت TrueTypeFont ttf و OpenTypeFont otf پشتیبانی می کنند.IE هم طبق معمول ساز مخالف می زنه و فقط از نوع Embedded OpenType  eot پشتیبانی می کند.

هنگام استفاده از font-face@ تعیین مقدار برای font-family و src الزامی می باشد.سایر گزینه ها که مقداردهی آنها اختیاری می باشد عبارتند از:

font-stretch,font-style,font-weight,unicode-range

برای اعمال در صفحه

div

{

    font-family: myfont,tahoma;

}

در کد بالا در صورتی که به هر دلیلی نتواند "myfont" را اجرا کند فونت پیش فرض tahoma اجرا می شود.

@font-face

{

    font-family: myfont;

    src: local('B Titr'), url('../Fonts/BTitrBd.ttf'), /* non-IE */

    url('../Fonts/BTitrBd.eot') format("opentype"); /* IE */

}

نکته ای که در کد بالا وجود دارد استفاده از دستور local  می باشد.

 باعث می شود در صورتی که فونت مورد نظر در سرور نصب شده باشد از این Local  

فونت استفاده کند در غیر این صورت از مسیر تعیین شده برای خواندن فونت استفاده می کند.

نکته اول:اگر بخواهیم از چندین فونت  در طراحی صفحات استفاده کنیم  به ازای هر فونت باید دستور font-face@ را به کار بریم.

نکته دوم:برای تبدیل فونت ttf به eot از این سایت استفاده کنید.