הוספת פונטים תפורים אישית לאתר (וקבצים מיוחדים)

על מנת להוסיף פונטים תפורים אישית לאתר, יש להכין את הפונטים בפורמטי WOFF, TTF – להעלות ולהגדיר אותם באתר.

הכנת הפונטים

יש להיכנס ל-FontSquirrel, ולהשתמש ב-Font Generator.

יש להעלות קובץ TTF או OTF
יש ללחוץ על "EXPERT" ולסמן TrueType, EOT Lite, WOFF וגם WOFF2 – ליתר בטחון
אם אלו פונטים בעברית, יש לבחור "Custom Subsetting" ושם לסמן "Hebrew"
יש לסמן "YES" ל-Agreement של זכויות השימוש ולהוריד את ה-KIT
אם יש יותר מפונט אחד, יש לבצע את התהליך בשנית לפונט השני

העלאת הפונטים (קבצים אחרים)

יש מגוון של קבצים שאינם מורשים להעלאה בוורדפרס, ובמיוחד לצורך הזה יש להתקין תוסף מיוחד שיאפשר את העלאת הקבצים הללו. העלאת הקבצים הללו מאפשרת גם שילוב פונטים תפורים אישית בתבנית, בהרחבות לאתר ובאתר עצמו.

יש להתקין את התוסף "WP Extra File Types" (קישור לדף התוסף)
יש לבחור "הגדרות" > "Extra File Types"
יש לסמן את הקופסא הראשונה (נדרש בגרסאות העדכניות של וורדפרס)
יש לסמן את קופסאות סוגי הקבצים הרלוונטיים (לפונטים, woff ו-ttf, זה מה שמוגדר בבסיס של Be Theme)
יש לגלול למטה עד הסוף ולשמור את השינויים
כעת ניתן להעלות את הפונטים לספריית המדיה (כמו כל קובץ תמונה רגיל)
מומלץ לכבות את התוסף בגמר העלאת הפונטים – אין צורך בו יותר

הגדרת הפונטים

כדי להגדיר את הפונטים, קודם כל יש להיכנס ל-BeTheme > BeTheme Options ושם ללחוץ על Fonts > Custom ולתת לכל פונט שם משמעותי, ולבחור את קבצי הפונטים מספריית המדיה, ולשמור את ההגדרות.

כעת ניתן לבחור את הפונטים החדשים תחת הממשק הרגיל של Fonts > Family.

הדרך הקלה ביותר להגדיר את הפונטים בסליידר, זה דרך קוד ה-CSS הבא:

.rs-layer {
  font-family:'Kazefet' !important;
}

הגדרה ידנית – לרפרנס

עבור הפונטים של אאא, היה צריך לבצע הגדרה ידנית לפי קובץ המידע שלהם, עם תוספת של קוד CSS (קצר), להלן הקוד שהיה בשימוש:

/* Webfont: פלוני
 * https://alefalefalef.co.il/ploni/
 * AlefAlefAlef © אאא
 * Licensed pageviews limit: 100,000/month
 */
@font-face{
	font-family: 'ploni';
	font-weight: 400; /*(regular)*/
	font-style: normal;
	src: url('https://www.masamedia.co.il/wp-content/uploads/2021/12/ploni-regular-aaa.woff2') format('woff2'),
		url('https://www.masamedia.co.il/wp-content/uploads/2021/12/ploni-regular-aaa.woff') format('woff');
}
@font-face{
	font-family: 'ploni';
	font-weight: 600; /*(bold)*/
	font-style: normal;
	src: url('https://www.masamedia.co.il/wp-content/uploads/2021/12/ploni-ultrabold-aaa.woff2') format('woff2'),
		url('https://www.masamedia.co.il/wp-content/uploads/2021/12/ploni-ultrabold-aaa.woff') format('woff');
}

li span,.rs-layer,div.desc,
div.title,div.answer, .column_visual ul li,
input, blockquote,
li a, a.button,
p,h1,h2,h3,h4,h5 {
  font-family:'ploni' !important;
}
strong, li, b {
  font-family:'ploni' !important;
}