این مطلب خلاصه مطلب درج شده قبلی می باشد و مسالب تخصصی از درون آن حذف شده است

اگر به دنبال این هستید که از فونت دیگری برای سایتتون استفاده کنید (مثل فونتی که برای لوگوی وبلاگ  ونمونه های زیر  استفاده کردم) امروز آموزش نوشتن css یا استایل برای به نمایش درآوردن این نوع فونت ها در سایت خودتون را,آموزش میدم.

نمونه فونت ها         مثلا فونت زیبا   یا   فونت بدر  یا مثلا فونت نستعلیق  یا فونت نیریزی

آپلود فونت ها

برای این کار شما ابتدا نیاز به آپلود فونت ها بر سایت خودتون دارید.فونت ها به ۴فرمت  svg ,ttf , woff , eot می باشد.فونت های ttf همون فونت های کامپیوتر خودتون می باشد.دو فونت دیگر هم فونت های اینترنتی هستند که من در انتها برای آپلود می گذارم تا دانلود کنیدشان.

بنابراین فونت ها را در یک پوشه دلخواه آپلود کنید.هر فونت باید هر ۴مدل بالاش آپلود شه (البته کارتون با ۳تاشم راه میفته!! مثلا اگر svg را نزارید!!)

 تبدیل فونت های دلخواه به وب فونت

برای تبدیل فونت ها می توانید از سایت های زیر بصورت آنلاین استفاده کنید

آموزش نوشتن شیوه نامه برای فونت ها (استایل یا css )!!

شما نیاز دارید تا همچین کدی را به css سایتتون اضافه کنید.

            @font-face {
            font-family: 'B morvarid';  /*   bold معرفی فونت مروارید   */
            src: url('http://www.font-api.ir/css/B morvarid={font-api.ir}.css')   /*آدرس اینترنتی محل دقیق فونت*/

دقت کنید این کد برای فونت Byekan می باشد شما اسم هر فونت دیگری که دوست داشتید اضافه کنید.همچنین محل فونت ها برای این کد پوشه font میباشد شما آدرس کامل فونت خودتونو وارد کنید.

نمایش در سایت

درون شیوه نامه خود محلی که می خواهید این فونت نمایش داده بشه شبیه این استایل را برایش بنویسید.این فقط یک مثاله اون قسمت font : B Morvaridفقط مهمه بقیش رو خودتون تغییر بدید!! .

#h1{
font-family:؛"B morvarid","Persian-Naskh","b homa","b traffic","Times New Roman",Arial,Helvetica;
font-size:40px;
font-weight:bold;}

دانلود بسته فونت های فارسی شامل فونت ها فایل HTML نمایش دموی آنلاین فونت ها و حالت های لازم (ttf , eot , wof) (بسته رو از حالت فشرده خارج کنید و انتقال دهید)

اگر از وبلاگ بیان استفاده می کنبد می تونید اینجوری فونت رو به سایتتون اضافه کنید

اول فونت دلخواه رو با سایت های فوق مخصوصا سایت دوم تبدیل کنید

دوم فونت رو به فضای اختصاصی تون انتقال بدید البته فقط همان پسوندهای ذکر شده در فوق

سوم روی فونت اضافه شده و آپلود شده کلیک کنید مطابق شکل زیر و لینک مستقیمش رو در بیارید (برای هر 3 نوع  فرمت بالا)

در مرحله آخر کد بالا رو به CSS‌مثل زیر اضافه کنید 

روی عکس ها کلیک کنید تا بزرگتر نشون بده

@font-face {
font-family: 'B Badr';
src: url('http://bayanbox.ir/id/2814527257576715029') format('embedded-opentype'),
src: url('http://bayanbox.ir/id/5403595440148421022') format('woff'),
url('http://bayanbox.ir/id/5535735203568765575') format('truetype');
}
@font-face {
font-family: 'B Ziba';
src: url('http://bayanbox.ir/id/7284151642055638003'),
src: url('http://bayanbox.ir/id/5753837309766065425'),
url('http://bayanbox.ir/id/3578786642160456433');
}