افزودن فونت به فریم ورک گانتری

[mahdi m 509]

درود

در انجمن جستجو میکردم و متوجه شدم خیلی از افراد نیاز به همچین آموزشی دارند و متاسفانه قبلا کسی این موارد رو ذکر نکرده بود.

این آموزش نتیجه جستجو و آموزش و کمی هم دانش خودمه

 

بعد از این که مراحل زیر را انجام دادید به راحتی می توانید فونت مورد نظرتون رو از مدیریت قالب انتخاب نمایید.

 

برای این کار باید دو مرحله رو انجام بدید:

1- افزودن فونت به فایل  template-options.xml

2- افزودن کد های  css

 

ابتدا این فایل رو باز نمایید (این فایل در قالب شماست. برای مثال در آدرس: templates/gantry/ می باشد.) و دنبال کد زیر بگردید:

کد:

<option value="geneva">Geneva</option>

خب بعد از کد فوق این کد را بنویسید

کد:

<option value="fontname">FontName</option>

FontName  نام فونت شماست که با توجه به نام فونت شما نوشته می شود. این فایل را ذخیره کنید و فایل template-rtl.css و یا template.css را واقع در پوشه css در نسخه های قدیمی و در نسخه های جدید (4.0 و 4.1) فایل       template-rtl.less  و  یا template.less را که در پوشه less واقع است باز کنید. برای مثال آدرس templates/gantry/less.

 

توجه داشته باشید در صورتی که می خواهید فونت شما در همه ی زبان ها لود شود، وارد فایل template و در صورتی که می خواهید فقط برای زبان های راست چین مثل فارسی و عربی لود شود وارد فایل template-rtl شوید.

 

برای لود شدن فونت در قالب کد زیرا به این فایل اضافه کنید:

کد:

@font-face {

font-family: ' FontName ';

src: url('../fonts/fontname.eot'); /* IE9 Compat Modes */

src: url('../fonts/ fontname.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */

url('../fonts/ fontname.woff') format('woff'), /* Modern Browsers */

url('../fonts/ fontname t.ttf') format('truetype'), /* Safari, Android, iOS */

url('../fonts/ fontname.svg#svgFontName') format('svg'); /* Legacy iOS */

}

توجه داشته باشید که باید فونت خود را ابتدا با فرمت ttf در اینترنت پیدا کرده و سپس با استفاده از ابزار زیر به فرمت های eot و woff و Svg نیز تبدیل کنید

 

http://www.fontsquirrel.com/tools/webfont-generator

 

فقط یک نکته ای را هم اشاره کنم اینکه این سایت خودش یک نسخه ttf دیگر از فونت نیز به شما می دهد. در صورتی که فونت شما کارنکرد، از فونت اصلی که قبلا در اینترنت با فرمت ttf پیدا کردید استفاده کنید.

 

همچنین اشاره کنم که فونت شما باید در مسیر templates/gantry/fonts آپلود شود که gantry نام قالب شماست. همچنین به جای FontName باید نام فونت خود را بنویسید.

 

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

کد:

.font-family-fontname {font-family: ' FontName ', Tahoma, sans-serif;}

باید در این کد هم به جای FontName و هم fontname که در کلاس font-family- fontname آماده است، نام فونت خودتان را بنویسید. به این صورت:

کد:

.font-family-koodak {font-family: 'Koodak', Tahoma, sans-serif;}

 

لازم به ذکر است که من این مراحل رو بر روی قالب hadron و برخی از قالب های شرکت rocketthem  که از فریم ورک گانتری استفاده میکنند تست کردم و جوابگو برای کار من بوده است.

 

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

**موفق و پیروز باشید**