מדריך הטמעת פונטים באתרים

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

מאת
זמן קריאה: פחות מדקה

א — העלה/י את קובצי הוובפונט

בעזרת תוכנת FTP – העלה/י אל השרת של האתר שלך את התיקיה webfont_files (שהגיעה בתוך ספריית ה־zip שנשלחה אליך לאחר הרכישה).

 

ב — קשר/י את הקבצים שהעלית

העתק/י את הקוד הבא, והדבק/י אותו בתוך אזור ה־HEADER של האתר שלך. בכל מקום שבו כתוב YOUR_FULL_URL_PATH_HERE שנה/י לכתובת המלאה של התיקיה בה נמצאים קובצי הפונטים שהעלית. לדוגמא: http://yoursite.co.il/webfont_files

<!--
/* Webfont: אסימון
 * https://alefalefalef.co.il/asimon/
 * AlefAlefAlef © אאא
 * Licensed pageviews limit: 100,000/month
 */ -->
<style type='text/css'>
@font-face{
	font-family: 'asimon';
	font-weight: 400; /*(regular)*/
	font-style: normal;
	src: url('YOUR_FULL_URL_PATH_HERE/asimon-regular-aaa.woff2') format('woff2'),
		url('YOUR_FULL_URL_PATH_HERE/asimon-regular-aaa.woff') format('woff');
}
@font-face{
	font-family: 'asimon';
	font-weight: 700; /*(bold)*/
	font-style: normal;
	src: url('YOUR_FULL_URL_PATH_HERE/asimon-bold-aaa.woff2') format('woff2'),
		url('YOUR_FULL_URL_PATH_HERE/asimon-bold-aaa.woff') format('woff');
}
@font-face{
	font-family: 'asimon';
	font-weight: 900; /*(black)*/
	font-style: normal;
	src: url('YOUR_FULL_URL_PATH_HERE/asimon-black-aaa.woff2') format('woff2'),
		url('YOUR_FULL_URL_PATH_HERE/asimon-black-aaa.woff') format('woff');
}
</style>

 

ג — עדכן/י את קובץ העיצוב

כדי להשתמש בוובפונטים החדשים שלך עליך לקרוא להם מתוך קובץ העיצוב (css).
הגדר/י את שם הפונט, את המשקל (100/200/300/400/500/600/700/800/900) ואת גודל הפונט ב־px, em, pt  וכו׳.
הנה פקודת CSS לדוגמא:

h1 { 
	font-family: 'asimon', sans-serif; 
	font-weight: 400; 
	font-size: 3em; 
}

 

ד — בדיקה וקבלת פידבק מאיתנו

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

 

קישורים שימושיים



תגובה אחת