איך להשתמש בגוגל פונט באתר שלך או בכל מטרה אחרת? מאמר זה ידריך אותך בשלבים שיש לנקוט כדי להפעיל פונטים (גופנים) באתר האינטרנט שלך.
אז בטח שמעתם שלגוגל יש מאות גופני אינטרנט בחינם המוכנים לשימוש עבור הפרויקט הבא שלכם. אבל איך אתה משתמש בהם באתר שלך? מאמר זה ידריך אותך בשלבים שיש לנקוט כדי להפעיל אותם באתר האינטרנט שלך. זה אמור לקחת פחות מ-10 דקות!
מה זה גוגל פונטס?
"גוגל גופנים
הושק לראשונה בשנת 2010 כיוזמה הנדסית לקדם את האינטרנט ולהפוך אותו למהיר יותר." –
Google Fonts הושק בשנת 2010, והפך במהרה למבחר הגופנים הגדול ביותר, החינמי, של קוד פתוח באינטרנט. כל הפונטים של גוגל הם בחינם לשימוש מסחרי ואישי. אתר Google Fonts מקל על כל אחד לבחור במהירות גופנים שונים ולנצל אותם לצרכי העיצוב שלו.
מי משתמש בגוגל גופנים?
כולם! מעצבים גרפיים, מעצבי UX, חוקרים, מפתחים, מעצבי אתרים, בלוגרים, מנהלי מדיה חברתית, יזמים, אמנים, סטודנטים, מורים, צלמים ועוד רבים. ראיתי בגוגל גופנים שימוש בשלטי חוצות, פוסטרים, חפיסות מצגות, הזמנות לחתונה, אתרי אינטרנט וספרים.
מי יוצר את הגופנים?
Google Fonts משתף פעולה עם מעצבי כתבות, בתי יציקה של כתבות וקהילת העיצוב בכל רחבי העולם. אנשים וארגונים אלה מעצבים את הגופנים שאתה רואה בגוגל גופנים. לדוגמה, Łukasz Dziedzic הוא מעצב גופן עצמאי שעיצב את הגופן הפופולרי, Lato . בית יציקה לגופנים בשם ParaType עיצב את הגופן PT Serif .
למה לגוגל אכפת מגופנים?
כל קישור של Google Fonts API באתר אינטרנט נותן ל-גוגל את ההזדמנות לבצע כריית נתונים יותר. זה נשמע מגעיל? כן, אבל אני לא חושב שזה אמור למנוע ממך להשתמש בגוגל גופנים.
עוד סיבה מנחמת יותר לגוגל אכפת מפונטים היא בגלל שהם רוצים להנגיש את גופני האינטרנט בקוד פתוח להמונים. הם רוצים ליצור אינטרנט מהיר ויפה יותר שקל יותר לניווט ולהשתמש בו. הם גם התחילו את Google Fonts בשנת 2010 כאשר שירות כזה היה נחוץ מאוד, אז הם פתרו בעיה נוספת שנתקלנו בה באינטרנט.
למה אני להשתמש בהם?
אתה לא יכול לעשות הכל לבד. האם אני צודק? בנוסף להיותך בחינם, עליך לשקול להשתמש בגוגל גופנים בפרויקט עיצוב אתרים הבא שלך מכיוון ש…
- קל ליישם את הגופנים באתר האינטרנט שלך
- יש יותר מ-850 גופנים לבחירה
- האיכות הכללית של הגופנים ממשיכה לעלות
- גופנים של גוגל ניתנים להורדה גם לשימוש בהדפסה
בסדר, בסדר, בסדר! עכשיו לגבי איך אתה משתמש בהם.
איך להשתמש בגוגל גופנים – צעד אחר צעד
1) עבור לאתר גוגל פונטס Google Fonts
בקר באתר Google Fonts שם תוכל לבחור מבין 853 משפחות גופנים ומספרים! האתר מאפשר לך לסנן תוצאות לפי סגנון גופן, שפות, פופולריות ומשקל. Google Fonts כולל גם גופנים חדשים אם אתה מבקר בדף "המוצגים" .
2) חפש גופנים | פונטים שאתה אוהב
אם יש לך בראש שם משפחה של גופן, תוכל לחפש אותו.
3) לחץ על "+" כאשר אתה מוכן להשתמש בו
לכל משפחת גופנים יש כפתור פלוס בפינה הימנית העליונה. לחץ על כפתור הפלוס כדי להוסיף את משפחת הגופנים ל"מגירת הבחירה" המופיעה בתחתית המסך.
4) חזור על שלבים 1-3 אם אתה מחפש יותר מגופן | פונט אחד לשימוש
5) לחץ על "מגירת הבחירה" כדי להציג את כל הגופנים שבחרת
"מגירת הבחירה" היא המקום שבו תראה את כל הגופנים שהוספת. זה המקום שבו תמצא את הקוד להוסיף לאתר שלך. יש לך גם אפשרות להוריד את הגופנים לשולחן העבודה שלך.
6) "מגירת הבחירה" היא המקום שבו תוכל לתפוס את הקוד שתעתיק/תדביק לאתר שלך בקוד HTML ו-CSS
מ"מגירת הבחירה", תעתיק את הקוד להדבקה ב-HTML וב-CSS שלך. על מנת שגוגל גופנים יפעלו באתר שלך, עליך להיות מקושר גם למשפחת הגופנים ל-Google Fonts API (ב-HTML) וגם את משפחת הגופנים שצוינה (ב-CSS).
7) הוסף משקלים וסגנונות גופנים שונים אם תרצה על ידי לחיצה על הכרטיסייה "התאמה אישית".
זו ההזדמנות האחרונה שלך להוסיף משקלים וסגנונות גופנים שונים למשפחות הגופנים שלך לפני שתוסיף אותם לאתר שלך. הוסף רק את משקלי הפונטים והסגנונות שאתה יודע שתצטרך, מכיוון שככל שתוסיף יותר גופנים כך הם ייטענו לאתר שלך לאט יותר.
8) העתק את קוד ה-HTML והדבק אותו ב-<head> של האתר שלך
טוב כמעט סיימנו! כל שעלינו לעשות כעת הוא להעתיק ולהדביק את קוד ה-HTML וה-CSS באתר האינטרנט שלך. ראשית, העתק את קישור ה-HTML לראש מסמך ה-HTML שלך.
קשור: 10 השאלות המובילות ביותר בגוגל על מטבעות קריפטו והשלכותיו
9) העתק את כלל ה-CSS והדבק אותו בקובץ ה-CSS של האתר שלך
לבסוף, עלינו גם להעתיק ולהדביק את כללי ה-CSS בקובץ ה-CSS שלך. אם אתה מוסיף גופן אחד של Google לאתר שלך, אתה יכול להוסיף את כללי משפחת גופני ה-CSS לתג הגוף שלך. אחרת, תצטרך להיות בטוח שאתה מוסיף אותו לרכיבים הנכונים בקבצי ה-CSS שלך.
10) שמור את שני הקבצים (HTML ו-CSS) ולאחר מכן רענן את האתר שלך והצג את הגופן החדש
אל תשכח לשמור ולרענן!
