ساده‌ترین روش افزودن فونت به پروژه HTML

فونت همواره یکی از اصلی‌ترین عناصر در طراحی است . علاوه بر پروژه‌های طراحی سایت ، در کارهایی همچون طراحی بنر ، طراحی لوگو و … نیز فونت اهمیت بسیار زیادی دارد . درمورد پروژه‌های طراحی سایت ، فونت یکی از اصلی‌ترین ملزومات است . اگر یک پروژه HTML را شروع به طراحی نموده و سپس توسط CSS بروی دیزاین آن نیز کار کنید ، اگر طراحی بسیار جذابی نیز بروی پروژه اجرا کنید ، بدون داشتن یک فونت زیبا ، پروژه شما جذاب نخواهد بود .

در پروژه‌های طراحی سایت ، چندین روش مختلف برای قرار دادن فونت روی پروژه قرار دارد . تفاوتی ندارد که پروژه شما به زبان فارسی است یا سایر زبان‌ها ! شما کافیست تا فونتی با وزن مناسب را برای پروژه خودتان یافته و بروی قالب خود قرار دهید . معمولا فونت‌ها دارای چند فرمت شناخته شده هستند که به شرح زیر است :

woff ( The Web Open Font Format )
woff2
ttf ( True Type Font )
eot ( Embedded OpenType )
svg

شما می‌توانید در پروژه‌های طراحی سایت از فرمت ttf و همچنین فرمت woff و woff2 استفاده کنید . فرمت ttf اصولا برای فونت‌هایی است که داخل سیستم عامل شما قرار می‌گیرند . اگر به قسمت fonts در ویندوز خودتان مراجعه کنید و یکی از فونت هارا بررسی کنید ، خواهید دید که فرمت این فونت‌ها همگی ttf هستند .

اما برای پروژه‌های طراحی وب بهترین فرمت ، woff و woff2 است چراکه این فرمت اساسا برای پروژه‌های تحت وب است . اما اکنون چگونه از یک فونت با فرمت woff یا woff2 بروی پروژه خودمان استفاده کنیم ؟

چگونه فونت woff یا woff2 را به پروژه معرفی کنیم ؟

قبل از هرچیزی لازم است تا فونت خودتان را پیدا کنید . برخی فونت‌ها مثل فونت ساحل و یکان که فونت‌هایی با وزن مناسب نیز هستند ، در سطح وب بصورت رایگان جهت دانلود قرار داده شده‌اند و می‌توانید بسادگی فایل آنها را دانلود کنید . پس از دانلود یک فونت شما ممکن است چندین وزن مختلف از آن را داشته باشید ، بصورت زیر :

Light
Regular
Medium
Bold
ExtraBold

مسلما وزن Medium و همچنین Regular برای استفاده در داخل متن سایت بسیار مناسب خواهند بود . وزن‌های Bold و ExtraBold عموما برای قسمت‌های تیتر و عناوین خاص استفاده می‌شوند .

برخی از فونت‌های دیگر همچون ایران سنس ، ایران سنس دست نویس ، یکان اصلاح شده و … بصورت لایسنس قانونی بفروش می‌رسند و لازم است تا آنها را خریداری کنید . پس از تهیه این فونت‌ها نیز شما به تمامی وزن‌ها و فرمت‌های فونت دسترسی خواهید داشت .

اکنون باید فایل فونت خود را داخل پروژه قرار دهید . معمولا از جهت استانداردسازی پروژه ، تمامی فونت‌ها را داخل یک دایرکتوری ( پوشه ) بنام fonts قرار می‌دهند .

جهت معرفی فونت در گام دوم ، باید یک فایل CSS داشته باشید . فایل اصلی استایل پروژه شما نیز درصورتی که یک پروژه استاندارد داشته باشید ، بصورت Style.css نام گذاری خواهد شد . اکنون قبل از هرچیزی باید فایل Style.css خود را داخل تمامی فایل‌های HTML خودتان آدرس دهی کنید که عموما بصورت زیر است :

<link rel="stylesheet" href="style.css" >

اکنون که تمامی فایل‌های HTML شما به فایل اصلی استایل پروژه یعنی Style.css دسترسی دارند ، زمان آن فرا می‌رسد تا فونت را داخل فایل Style.css معرفی کنیم . جهت معرفی کردن فایل فونتی که داخل فولدر fonts قرار دادیم باید دستور زیر را داخل Style.css قرار دهیم :

@font-face {
	src: url('fonts/dana-fanum-medium.woff') format('woff');
	font-family:'seo90';
}

body,html{
	font-family:'seo90';
	font-size:15px;
}

اکنون شما فونت دانا با وزن medium را از داخل پوشه fonts آدرس دهی کرده و یک نام برای آن بصورت :

seo90

قرار دادید . نهایتا برای body,html همین خانواده فونت را با یک اندازه 15 پیکسلی معرفی کردیم تا تمام پروژه از این فونت استفاده کند . به همین سادگی شما فونت دلخواه را به پروژه خودتان معرفی خواهید کرد .

افزودن فونت به پروژه‌های تحت وب به همین اندازه ساده است . روش‌های دیگری نیز همچون CDN وجود دارد که شما فونت را از یک آدرس در اینترنت فراخوانی کنید . اما مسلما این روش‌‌‌‌‌‌‌‌‌ها به این دلیل که احتمال قطعی سایت منبع وجود دارد ، برای ما بهینه نیستند لذا بهتر است تا به همین روش عمل نموده و فایل فونت را داخل دایرکتوری پروژه قرار دهیم .

امید قدیمی هستم ، 8 سال است که در زمینه طراحی و برنامه نویسی وب سایت فعالیت می کنم . توسعه دهنده فرانت اند ، طراح و برنامه نویس انواع وب سایت های وردپرسی ، فعال در زمینه تولید محتوا و سئو وب سایت

اشتراک گذاری محتوا