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

 

א — העלו את קובצי גופני־הרשת

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

 

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

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

<!--
/* Webfont: אסימון
 * https://alefalefalef.co.il/asimon/
 * AlefAlefAlef (c) 2018 אאא
 * License: https://alefalefalef.co.il/webfonts/
 * Licensed pageviews limit: 1,000,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-aaa-regular.woff2') format('woff2'),
		url('YOUR_FULL_URL_PATH_HERE/asimon-aaa-regular.woff') format('woff');
}
@font-face{
	font-family:'asimon';
	font-weight:700; /*(bold)*/
	font-style: normal;
	src: url('YOUR_FULL_URL_PATH_HERE/asimon-aaa-bold.woff2') format('woff2'),
		url('YOUR_FULL_URL_PATH_HERE/asimon-aaa-bold.woff') format('woff');
}
@font-face{
	font-family:'asimon';
	font-weight:900; /*(black)*/
	font-style: normal;
	src: url('YOUR_FULL_URL_PATH_HERE/asimon-aaa-black.woff2') format('woff2'),
		url('YOUR_FULL_URL_PATH_HERE/asimon-aaa-black.woff') format('woff');
}
</style>
<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:     30px; 
	}

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

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

 

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

אסימון - עמוד הפונט
מדריך לטיפול בבעיות נפוצות בהטמעת פונטים לווב
הסבר על רישיון וובפונט
איך להשתמש במשקלים של פונטים ב־css (אנגלית)
How to Bulletproof @font-face Web Fonts (אנגלית)
באגים של font-face (אנגלית)
The @Font-Face Rule And Useful Web Font Tricks (אנגלית)

 

 

 

 



עמוד זה עודכן בתאריך 20.09.2018 | t קיש־צור: https://alefalefalef.co.il?p=207 |  דיווח על שגיאה בעמוד