הטמעת פונט עם קבצים - עבור אתר ספציפי
כשעתיים פיתוח
אם הפונט שרוצים להטמיע מגיע עם קבצים (הטמעת פונט של גוגל למשל לא בהכרח מצריכה עבודה עם קבצים) יש לבצע את השלבים הבאים:
1. צרו תקייה בשם של הפונט (על הדסקטופ שלכם, לא חשוב איפה).
2. השיגו את קבצי הפונטים מהגורם הרלוונטי - בד"כ מי שביקש להטמיע את הפונט (מנהלת פרויקט/מנהלת צוות...), או מעצבת.
לאחר מכן הכניסו קבצים אלה לתקייה שיצרתם.
*אלה קבצים המסתיימים ב-ttf, woff, eot
3. העלו את התקייה לנתיב: layout3/stores/store_name ב-S3 (*אם לא קיימת תקייה בשם החנות בנתיב layout3/stores יש ליצור אותה, ואז לשים בתוכה את התקייה עם קבצי הפונטים).
עדכון: במקום הכתוב באדום כאן למעלה ^, יש להעלות את הקבצים של הפונט בחשבון AWS של devKonimbo, בבאקט שנקרא konimbo-stores בנתיב הבא:
store_name/fonts/font_name
אם הנתיב לא קיים יש ליצור את התקיות החסרות.
*אם אין לכם גישה ל-S3 יש לבקש ממי שיש לו גישה שיעלה את התקייה.
4. צרו הייבריד (*יפעל בינתיים רק על הסאבדומיין) בחנות שבה רוצים להטמיע את הפונט, ובתוכו שימו קטעי קוד בדומה לזה:
@font-face {
font-family: 'almoni-neue';
font-style: normal;
font-weight: 400;
src: url(https://s3-eu-west-1.amazonaws.com/konimboassets/layout3/stores/store_name /almoni-neue/almoni-neue-aaa-400.eot?#iefix) format('embedded-opentype'),
url(https://s3-eu-west-1.amazonaws.com/konimboassets/layout3/stores/store_name /almoni-neue/almoni-neue-aaa-400.woff) format('woff'),
url(https://s3-eu-west-1.amazonaws.com/konimboassets/layout3/stores/store_name /almoni-neue/almoni-neue-aaa-400.ttf) format('truetype');
}
@font-face {
font-family: 'almoni-neue';
font-style: normal;
font-weight: 700;
src: url(https://s3-eu-west-1.amazonaws.com/konimboassets/layout3/stores/store_name /almoni-neue/almoni-neue-aaa-700.eot);
src: url(https://s3-eu-west-1.amazonaws.com/konimboassets/layout3/stores/store_name /almoni-neue/almoni-neue-aaa-700.eot?#iefix) format('embedded-opentype'),
url(https://s3-eu-west-1.amazonaws.com/konimboassets/layout3/stores/store_name /almoni-neue/almoni-neue-aaa-700.woff) format('woff'),
url(https://s3-eu-west-1.amazonaws.com/konimboassets/layout3/stores/store_name /almoni-neue/almoni-neue-aaa-700.ttf) format('truetype');
}
בהתאם לקבצים שסופקו לכם (הסתכלו לשם כך בשמות הקבצים).
זאת אומרת שאם יש לכם קובץ של פונט, בשם "almoni-neue-aaa-italic-700" -
תדעו שתצטרכו להוסיף בלוק font-face שה-font-style שלו הוא italic וה-font-weight שלו הוא bold (זאת אומרת 700 *צירפתי טבלת המרה של עובי פונט בתחתית המסמך, למקרה שתצטרכו).
הלינקים ב-src וב-url יהיו הלינקים לקבצים עם אותו השם. כנראה שיהיו לכם שלושה קבצים לכל פונט ספציפי (ttf, woff, eot) ותצטרכו להכניס אותם כמו בדוגמא הנ"ל (ה-eot בשתי השורות של ה-src, וה-ttf ו-woff בשורות של ה-url, עם הפורמט המתאים כמו בדוגמא).
בנוסף יש לשים בתחילת ה-CSS קוד כזה:
להשאיר את שם הפונט בלבד ולעשות עליו !important
body {
font-family: 'almoni-neue','Open Sans Hebrew',Arial !important;
}
כאשר הפונט הראשון שמוגדר (כאן הוא almoni-neue) יהיה הפונט שאתם מטמיעים, כפי שכתבתם אותו ב-font-family בבלוקים של ה-font-face.
זה מה שיגדיר למעשה את הפונט בכל האתר כפונט שהטמעתם.
5. לבסוף יש לבדוק את נראות האתר (במיוחד אם זה אתר באוויר).
לפעמים הפונט החדש הוא קטן או גדול יותר מהפונט שהיה. כדאי להעביר למעצבת של האתר לבדיקה כללית. אם הכל תקין אפשר להפעיל את ההייבריד על הדומיין.
* קיימת דוגמא להייבריד כזה באתר xiaoai *
------------------------------------------------
*אם רוצים שהפונט יחול רק על טקסטים מסוימים באתר, הסלקטור ב-CSS ישתנה בהתאם (במקום ה-body)
הכוונה לא לגעת בפונט שמוגדר ל-body, ורק להוסיף CSS כזה (בהתאם לאיזה טקסט שרוצים שהפונט יחול עליו):
#bg_header h3 {
font-family: 'almoni-neue','Open Sans Hebrew',Arial !important;
}
בדוגמא הנ"ל הפונט almoni-neue יחול רק על כותרות h3 בהדר
**לחילופין, ניתן להגדיר על אילו תווים בדיוק הפונט יחול, ע"י הוספת unicode-range בבלוק של ה-font-face
לדוגמא, באתר dynamica רצו להחיל את פונט roboto רק על התו "₪", לכן בכל הבלוקים של font-face של roboto שהוספנו, הכנסנו את השורה הבאה:
unicode-range: U+20AA;
הקוד U+20AA הוא של התו "₪".
בנוסף, רצו להחיל את הפונט poppins רק על הטקסט שבאנגלית, לכן בכל הבלוקים של font-face של poppins שהוספנו, הכנסנו את השורה הבאה:
unicode-range: U+0041-005A, U+0061-007A;
הטווח U+0041-005A תופס את כל האותיות הגדולות באנגלית, והטווח U+0061-007A תופס את כל האותיות הקטנות.
ואז השורה שקובעת את הפונט תראה כך:
body {
font-family: 'Roboto','Poppins','SimplerPro_V3','Open Sans Hebrew',Arial,FontAwesome !important;
}
כאשר הפונטים מסודרים לפי המחמיר ביותר לכללי ביותר.
קודם roboto משום שהוא חל רק על תו ספציפי,
ואז poppins שחל רק על אנגלית,
ואז הפונט SimplerPro_V3 שרצו שיחול על שאר האתר,
ולבסוף הפונטים הדיפולטיביים שיחולו רק אם משהו לא תקין בפונטים הראשונים.
------------------------------------------------
עובי פונט:
Common weight name | Value |
Thin (Hairline) | 100 |
| Extra Light (Ultra Light) | 200 |
| Light | 300 |
| Normal (Regular) | 400 |
| Medium | 500 |
| Semi Bold (Demi Bold) | 600 |
| Bold | 700 |
| Extra Bold (Ultra Bold) | 800 |
| Black (Heavy) | 900 |
| Extra Black (Ultra Black) | 950 |