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

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

 

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

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

<!--
/* Webfont: אסימון
 * https://alefalefalef.co.il/asimon/
 * AlefAlefAlef © אאא
 * Licensed pageviews limit: 10,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; 
}

 

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

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

 

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



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