اموزش افزودن فونت به قالب و استفاده ازان

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

از مهم ترین مشکلاتی که کاربران در این راه با آن مواجه می شوند، ناتوانی در آدرس دهی صحیح فونت هاست. کمی اشکال در آدرس دهی فونت در دستور font-face می تواند کار را خراب کند! در این مستند از سایت نوین سورس قصد داریم به شما نحوه کامل افزودن فونت دلخواه به قالب را آموزش دهیم.

مراحل انجام کار

1 . انتخاب و آپلود فونت در قالب

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

فونت استاندارد مخصوص وب ، معمولا علاوه بر TTF ، فرمت های دیگری مانند SVG و WOFF و WOFF2 و EOT نیز دارد که تمامی این فرمت ها در دستگاه های خاص و شرایط مخصوصی بارگیری می شوند. پس نیاز است که تمامی فرمت های فونت را استفاده کنیم.

اگر فونتی که قصد دارید استفاده کنید، تنها در فرمت TTF در دسترس است، با استفاده از ابزار آنلاین تبدیل کننده فرمت فونت ، فرمت های مذکور در بالا را از فونت دریافت نمایید. (در اکثر مواثع نیازی به فرمت WOFF2 نیز ولی می توانید در گوگل جستجو کنید و نحوه اضافه کردن این فرمت به کد Font-Face مرحله دوم این مستند را میز یاد بگیرید)

پس از دریافت تمامی فرمت های لازم از فونت ، وارد پوشه قالب درحال استفاده در فایل منیجر هاستتان شوید. فایل اصلی استایل قالب را پیدا کنید. این فایل در برخی از قالب ها ، همان فایل Style.css موجود در روت پوشه قالب است، اما گاهی اوقات ، طراحان تصمیم می گیرند فایل اصلی استایل قالب را در مکان دیگری تعریف کنند. شما باید این فایل را پیدا کنید! استایل اصلی قالب معمولا استایل های مربوط به html و body و Selector (*) و … را شامل می شود.

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

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

اکنون وارد پوشه جدید ساخته شده شوید. تمامی فرمت هایی که از فونتتان ساخته اید به همراه فرمت اولیه (یعنی TTF) را در این پوشه آپلود (Upload) کنید.

2 . معرفی فونت جدید به قالب

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

@font-face {
font-family: ‘devmefont’;
src: url(‘fonts/devme.eot’);
src: url(‘fonts/devme.eot#iefix’) format(’embedded-opentype’),
url(‘fonts/devme.woff’) format(‘woff’),
url(‘fonts/devme.ttf’) format(‘truetype’),
url(‘fonts/devme.svg#CartoGothicStdBook’) format(‘svg’);
font-weight: normal;
font-style: normal;
}

اطلاعات کد:

در خط 2 کد استایل بالا، یک نام برای فونت جدید انتخاب می کنیم. لزوما این نام نباید مانند نام اصلی فونت ذخیره شده باشد. شما می توانید برای فونت جدید خود یک نام دلخواه تعیین کنید. ما از این نام، در دستورات Font-Family در فایل های استایل جهت اختصاص دادن فونت جدید به بخش های مختلف استفاده خواهیم کرد. توجه: این نام نباید حاوی فاصله باشد. پیشنهاد شدید ما استفاده از حروفی انگلیسی کوچک و بزرگ است. از فاصله و اعداد استفاده نکنید، هر چند اگر در منابع دیگر متوجه شوید کاراکترهای خاص هم می توانند در نام فونت انتخاب شوند، اما به شما پیشنهاد می کنیم تنها از حروف انگلیسی استفاده کنید. نام فونت مثال ما در کد بالا، devmefont است.
در خط 3 تا 8 ، آدرس و نام دقیق فونت را مشخص می کنیم. در این کد شما می توانید آدرس فونت را به صورت یک لینک کاملا مستقیم به همراه نام سایت مانند https://novinsourc.ir/wp-content/themes/sampletheme/font/devme.ttf را نیز وارد کنید. اما در کد بالا، شروع آدرس از همان مکانی است که این کد در فایل CSS قرار گرفته. اگر فایل CSS شما که البته کد بالا هم در آن قرار گرفته، در یک مسیر خاصی از پوشه قالب است، آدرس پیش از مکان فونت بر اساس مکان فعلی فایل استایل محاسبه خواهد شد. یعنی نیازی نیست مسیر قبل از فایل استایل را در این کد وارد کنید. ما در این مستند فرض کرده ایم که در کنار فایلی که قرار است کد بالا را در آن قرار دهیم، یک پوشه به نام fonts ایجاد کرده ایم و فرمت های مختلف فونتمان را درون آن بدون هیچ پوشه اضافه دیگری ، آپلود کرده ایم. همانگونه که می بینید ما قبل از آدرس فونت جدید (یعنی قبل از نام پوشه fonts ) بک اسلش قرار نداده ایم. شما هم نیازی نیست چنین کاری بکنید. مگر اینکه فونت شما در مسیرهای قبل تر از مسیر فایل استایل قرار داشته باشد که نیاز خواهد بود توسط دستورات خاص ، مسیر فونت را معرفی کنید. اگر هم داخل پوشه fonts مجددا یک پوشه اضافه دیگری داشتید که فونت ها در آن پوشه بودند، حتما باید آدرس فونت در کد بالا را اصلاح نمایید.

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

در خط 3 تا 8 ، علاوه بر مسیر فونت، نام فونت هم دقیقا باید همان نام فایل های فونت باشد که در فایل منیجر آپلود کرده اید. شما می توانید یک نام ثابت دلخواه برای تمامی فرمت های فونت جدید انتخاب کنید و نام فونت را در کد بالا جایگزین کنید. اگر اولین بار است این کار را انجام می دهید، بهتر است در کد Font-Face بالا، فرمت های استفاده شده را تغییر ندهید، و بلکه نام فونت را اصلاح کنید. اگر هر فرمت از فونت جدید، یک نام متفاوتی داشت، باید هر فرمت با نام را به طور کامل وارد کنید. اما برای سهولت انجام کار، یک نام ثابت را برای تمامی فرمت های فونت انتخاب کنید.

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

3 . اختصاص دادن فونت جدید به بخش های قالب

پس از معرفی فونت به قالب از طریق دستور استایل Font-Face ، زمان اختصاص دادن فونت جدید به بخش های مختلف قالب است. این کار هم بسیار آسان است ولی برای سهولت انجام این کار ، پیشنهاد ما به شما، استفاده از نرم افزار NotePad++ است. هر چند با برنامه نوت پد پیش فرض ویندوز هم قادر به انجام چنین کاری خواهید بود ولی برای تجربه بهتر ، می توانید از نرم افزار NotePad++ استفاده کنید.

در این مرحله، فایل های با فرمت CSS را با نرم افزار نوت پد باز می کنیم و به دنبال دستورات font-family می گردیم! کافیست از امکان جستجو استفاده کنید. اگر در نرم افزار NotePad++ هستید، کلید ترکیبی Ctrl+F را بزنید تا پنجره مربوط به جستجو یا Find برایتان نمایش داده شود. تمامی Font-Family های موجود در فایل های استایل قالب را بررسی می کنیم و نام فونت جدید را به بخش ها اختصاص می دهیم.

برای مثال ، ما در فایل استایل یک قالب فرضی ،یک قطعه کد استایل را پیدا کردیم که در آن از خاصیت font-family استفاده شده به صورت زیر:

.btn.btn–light {
background: #FFF;
border:1px solid #D4D4D4;
color: #9C9C9C !important;
font–family: “Open Sans”, Helvetica, sans–serif;
font–size: 12px;
height: auto;
padding: 0 13px;
}

فونت هایی که برای این بخش از قالب در نظر گرفته شده عبارتند از :

“Open Sans”, Helvetica, sans-serif

اکنون ما نام فونت جدید که به قالب معرفی کرده ایم را در این کد وارد می کنیم:

font-family: ‘devmefont’, Open Sans, Helvetica, sans-serif;

در کد بالا ما نام فونت را داخل نماد نقل قول تکی قرار داده ایم. شما می توانیم آن را به صورت معمولی وارد کنید:

font-family: devmefont, Open Sans, Helvetica, sans-serif;

حتی می توانید فونت های اضافه را حذف کنید تا تنها فونت فارسی جدید در تمامی متن های این بخش اعمال شود:

font-family: devmefont;

اما برای نمایش بهتر متن های انگلیسی، بهتر است حداقل فونت پیش فرض که در تمامی دستگاه ها قابل اجراست را در کنار نام فونت جدید قرار دهیم:

font-family: devmefont, sans-serif;

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

.btn.btn-light {
background: #FFF;
border:1px solid #D4D4D4;
color: #9C9C9C !important;
font-family: devmefont, sans-serif;
font-size: 12px;
height: auto;
padding: 0 13px;
}

توجه : در صورت نیاز، شما باید عمل اختصاص دادن فونت جدید به بخش های مختلف قالب را مانند کد بالا ادامه دهید تا تمامی Font-Family های استفاده شده در فایل های استایل را اصلاح کنید.

نکته مهم و ضروری

اعمال فونت جدید بدون هیچ زحمت اضافه

در روش قبل ، ما یک به یک نام فونت جدید را به Font-Family ها اضافه کردیم. اما این کار علاوه بر زمانبر بودنش، ممکن است باعث خرابی سایت شود! دلیل این گفته این است که در اکثر قالب ها، برخی از Font-Family ها، صرفا برای یک بخش متنی نیستند. این برخی هایی که گفته شد، برای فونت آیکن استفاده می شوند.

فونت آیکن هم همانطور که می دانید، فونتی است که آیکن هایی را در بخش های مختلف قالبمان نمایش می دهد. مانند آیکن های فلش ، ستاره ، جستجو و … . تغییر دادن نام فونت آیکن در دستورات Font-Family باعث عدم نمایش آیکن ها در سایت خواهد شد! پس اگر قصد دارید تمامی فونت فمیلی ها را تک تک اصلاح کنید، باید مراقب نام فونت آیکن ها باشید. شما نباید نام فونت جدید را در کنار نام فونت آیکن ها استفاده کنید.

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

اما به هر حال یک راه حل خوب و سریع برای اختصاص دادن فونت جدید به بخش های قالب و جلوگیری از بروز چنین مشکلی وجود دارد که هر چند این روش هم مشکلات خودش را دارد ولی مراحل انجام کار را سریع تر از قبل می کند!

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

body,html,p,a,li,ol,ul,input,textarea,h1,h2,h3,h4,h5,h6 {font–family: devmefont, sans–serif !important;}

در کد بالا، بجای devmefont ، نام فونت جدید که در مرحله 2 برای فونتتان انتخاب کردید را وارد کنید.

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

محمد رضا

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

آخرین پست توسطمحمد رضا (همه را ببین)

به این مطلب امتیاز دهید.

5 / 0

[ 0 رای ]

بازدید : 18 views بار دسته بندی : مرتبط با سایت تاريخ : 22 سپتامبر 2017 به اشتراک بگذارید :

نوین سورس