עיצוב וקוד מדריך הטמעת פונטים לווב

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

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

בעזרת תוכנת 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>
<!-- OPTIONAL fallback font -->
<link href='https://fonts.googleapis.com/css?family=Dosis:400,700,800' rel='stylesheet' type='text/css'>

 

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

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

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

 

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

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

 

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



תגובות פייסבוק