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

اگر میخواهید در سایتتان از فونت های دلخواه استفاده کنید ولی روش انجام این کار را نمیدانید، این آموزش مخصوص شماست. در آموزش امروز به همراه ما خواهید آموخت که چگونه میتوان فونت یا فونت های دلخواه را از طریق CSS به سایت اضافه کرد و آنها را در محل های دلخواه به کار گرفت. بله، درست متوجه شدید، شما محدود به استفاده از یک فونت نیستید. با استفاده از این روش میتوانید فونت های متعددی را بر اساس نیاز در سایتتان به کار بگیرید. البته ما استفاده از بیش از ۲ فونت را به شما توصیه نمیکنیم به این جهت که بارگذاری هر یک از این فونت ها بسته به سرعت اینترنت کاربرانتان، زمانگیر بوده و میتوانید منجر به دریافت نتایج نامطلوب شود. از این توضیحات گذشته، از شما دعوت میکنیم که در ادامه این آموزش با ما همراه شوید.

 

 

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

آشنایی با فرمت های فونت های وب (Web Fonts)

فونت های مخصوص وب دارای فرمت های متعددی هستند. این فرمت ها عبارتند از TTF, OTF, WOFF, WOFF2, SVG و EOT. هر یک از این فرمت ها در ورژن های خاصی از مرورگرهای خاصی قابل استفاده هستند. مثلا مرورگر Internet Explorer از فرمت های WOFF2 و SVG پشتیبانی نمیکند. این در حالی است که فرمت EOT فقط توسط اینترنت اکسپلورر پشتیبانی شده و توسط هیچ یک از مرورگرهای دیگر مانند اپرا، کروم، سافاری و فایرفاکس مورد استفاده قرار نمیگیرد.

 

نکته ی مهم در رابطه با فرمت های فونت این است که اگر فرمتی که در سایت خود در نظر میگیرید، برای مرورگری شناخته شده نباشد، آنوقت فونت دلخواه شما نیز بارگذاری نشده و بجای آن از فونت های جایگزین استفاده میشود. بنابراین در استفاده از وب فونت ها همیشه میبایست سعی کنید فرمت های مناسبی را جهت استفاده برای مرورگرهای مختلف در سایت خود ارائه دهید تا نحوه نمایش سایت شما در انواع مرورگرها تا حد امکان، یکسان و مشابه باشد.

پیوست فونت به CSS

برای اضافه کردن فونت به CSS از عبارت @font-face استفاده میکنیم. باید در نظر داشته باشید که هر فونت سفارشی که میخواهید در سایت استفاده کنید را باید حتما ابتدا به css سایت خود اضافه کرده باشید. در غیر این صورت این فونت برای کاربران به درستی به نمایش در نیامده و در کامپیوتر هر شخص از یک فونت جایگزین برای آن استفاده خواهد شد. بنابراین تعریف فونت در فایل استایل قالبتان را فراموش نکنید.

برای پشتیبانی از همه مرورگر ها

اگر فونتی که در اختیار دارید، همه فرمت های موجود را در اختیار شما قرار داده باشد، بنابراین با درج دستورات مناسب در فایل استایل، میتوانید کاری کنید که همه مرورگرها این فونت را به درستی به نمایش بگذارند. برای پشتیبانی از همه مرورگر ها از دستورات زیر استفاده میکنیم :

 

@font-face {
  font-family: 'MyFontName';
  src: url('webfont.eot'); /* IE9 Compat Modes */
  src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('webfont.woff2') format('woff2'), /* Super Modern Browsers */
         url('webfont.woff') format('woff'), /* Pretty Modern Browsers */
         url('webfont.ttf')  format('truetype'), /* Safari, Android, iOS */
         url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}

 

همانطور که مشاهده میکنید، در دستورات بالا از تمامی فرمت های فونت برای پشتیبانی از همه مرورگرها استفاده شده است.
حالا اجازه بدهید به توضیح دستورات فوق بپردازیم. در خط دوم ما نام دلخواهمان را برای فونت انتخاب کرده ایم. هر نامی که در اینجا وارد کنید، بعدا جهت دسترسی به فونت در بخش های مختلف، میبایست دقیقا از همان نام استفاده کنید. توجه داشته باشید که حروف کوچک و بزرگ در اینجا حائز اهمیت هستند. همچنین بهتر است این نام دارای فاصله نباشد. همانطور که در خط های بعدی نیز قابل مشاهده است، هیچ الزامی نیست نام فایل فونت شما با نامی که برای استفاده از فونت انتخاب میکنید یکسان باشد.

 

در اینجا یک نکته وجود دارد، بر اساس آدرس دهی فوق، انتظار میرود که فونت شما با فایل CSS شما دقیقا در یک محل قرار داشته باشند. ولی فرضا اگر فونتهای شما در یک فولدر در محل قرارگیری فایل استایل قرار گرفته باشند، لازم است بجای اینکه فقط نام فونت را وارد کنید، مسیر آن را نیز درج کنید. مثلا :

 

folder/webfont.eot

یا

folder/subfolder/webfont.eot

بجای

webfont.eot

 

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

پشتیبانی از اکثر مرورگرها

تعریف کردن همه فرمت های فونت به نظر کمی زیاده روی میرسد! از طرفی ممکنه است شما همه فرمت های وب فونت دلخواهتان را در اختیار نداشته باشید. اما اکثر فونت ها حتما حداقل سه فرمت TTF, WOFF و WOFF2 را در اختیار شما قرار میدهند. بنابراین برای پشتیبانی منطقی از اکثر مرورگرهایی که امروزه توسط کاربران مورد استفاده قرار میگیرند میتوانید از دستورات زیر استفاده کنید :

 

@font-face {
  font-family: 'MyFontName';
  src: url('webfont.woff2') format('woff2'),
         url('webfont.woff') format('woff'),
         url('webfont.ttf') format('truetype');
}

 

فقط پشتیبانی از مرورگرهای مدرن

انتظار میرود که در آینده نه چندان دور، همه مرورگرها از فرمت WOFF2 پشتیبانی کنند. بنابراین اگر بخواهید فقط مرورگرهای مدرن امروز (کروم ورژن ۳۶ به بعد، فایرفاکس ورژن ۳۵ به بعد، اپرا ۲۳ به بعد و آندروید ۳۷ به بعد) را هدف بگیرید میتوانید فقط و فقط از فرمت WOFF2 استفاده کنید. در این حالت کد شما به شکل زیر در خواهد آمد :

 

@font-face {
  font-family: 'MyFontName';
  src: url('webfont.woff2') format('woff2');
}

 

استفاده از Google Fonts یا فونت های گوگل

با فونت های گوگلی که آشنا هستید؟ Google Fonts فونت های متنوع و متعددی را خصوصا برای زبان انگلیسی در اختیار شما قرار میگیرد. در میان این فونت ها، یکی دو تا فونت زیبا برای نمایش فارسی نیز به چشم میخورند. اگر بخواهید بجای فونت های آپلود شده روی هاست خود از فونت های گوگلی استفاده کنید، میتوانید از دو روش مختلف استفاده کنید. روش اول فراخوانی فونت در فایل CSS شما با دستور @import است. برای انجام این کار کافی است از کد زیر استفاده کنید :

 

@import url(//fonts.googleapis.com/css?family=Open+Sans);

 

طبعا آدرس درج شده در کد بالا را میتوانید با آدرس فونت دلخواهتان جایگزین کنید.

روش دوم فراخوانی فونت با استفاده از تگ link در html است. در این حالت میتوانید فونت دلخواه را در ناحیه head سایت خود به شکل زیر صدا کنید :

 

<link href='//fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>

 

استفاده از فونت دلخواه در سایت

خوب، تا اینجا دیدیم که چطور میتوانید فونت دلخواهمان را به روش های مختلف به سایت اضافه کنیم. در واقع بخش اصلی کار ما به پایان رسیده و خشت اول را به درستی در محل خود قرار داده ایم. پس از تعریف فونت دلخواه (چه فونت های عادی و چه فونت های گوگلی)، حالا نوبت به استفاده از آن در محل های مورد نظرمان میرسد. فرض کنید که میخواهیم فونت تگ body سایت را روی فونت دلخواهمان تنظیم کنیم. برای این کار میتوانید از کد زیر استفاده کنید :

 

body {
  font-family: MyFontName, 'Segoe UI', Tahoma, sans-serif;
}

 

حالا به شرح کد بالا میپردازیم. در خط دوم همانطور که مشاهده میکنید ابتدا نام فونت دلخواهی که قبلا به سایت اضافه کرده بودیم را مشخص کردیم (MyFontName) فونت هایی که در ادامه مشخص شده اند، فونت های جایگزین فونت اصلی ما هستند. در واقع با نوشتن کد فوق داریم اعلام میکنیم که اگر به هر دلیل فونت اولیه در دسترس نبود، به ترتیب فونت های بعدی جایگزین آنها شوند. استفاده از کوتیشن در نام فونت ها الزامی نیست ولی توصیه میکنیم حتما برای فونت هایی که در نام آنها فاصله وجود دارد، از کوتیشن استفاده کنید تا فراخوانی فونت به درستی صورت بگیرد.

در مثال بالا ما فونت را برای بدنه سایت تعیین کردیم، ولی در این رابطه محدودیتی برای شما وجود ندارد و میتوانید از فونتی که در سایت فراخوانی کرده اید، برای انواع عناصر سایتتان از جمله تگ های p, li, span, a و یا هر کلاس یا id دیگری نیز بهره بگیرید.

 

سخن پایانی

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

از اینکه با ما همراه بودید، متشکریم. امیدواریم از این آموزش لذت برده باشید.