א — העלה/י את קובצי הוובפונט
בעזרת תוכנת 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; }
ד — בדיקה וקבלת פידבק מאיתנו
לאחר שהטמעת את הוובפונטים החדשים שלך כדאי שתבדוק/י שהם נראים כמו שצריך, על דפדפנים שונים.
אם את/ה עדיין מסתבך/ת – לרשותך מדריך לטיפול בבעיות נפוצות.
תגובה אחת
תודה :) עוד מידע על font-face@ ניתן למצוא כאן: https://he.savvy.co.il/blog/?p=12437