א — העלו את קובצי הוובפונט
בעזרת תוכנת 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;
}
ד — בדיקה וקבלת פידבק מאיתנו
לאחר שהטמעתם את הוובפונטים החדשים שלכם יש לבדוק שהם נראים כמו שצריך, על דפדפנים שונים.
אם אתם עדיין מסתבכים – לרשותכם מדריך לטיפול בבעיות נפוצות.
Loading...
