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