אופטימיזציה של פונטים ב-Next.js – טעינה חכמה וחוויית משתמש חלקה
מדריך קליל על טעינת פונטים ב-Next.js בעזרת @next/fonts, כולל מניעת קפיצות Layout, טעינה חכמה של קבצים נחוצים בלבד, ודרכים להתנהלות נכונה עם כמה פונטים במקביל בפרויקט.
והיום גיא ידבר על אופטימיזציה של פונטים בNext. דרגת קושי 2/10. ⭐⭐ וכבר הזכרנו בעבר שאחת היתרונות של ייבוא פונטים בעזרת @next/fonts הוא מניעה של קפיצת הlayout כתוצאה מזה שבזמן הבקשה והטעינה הנוספת לשרתים של גוגל (לדוגמא). הfont fallback הוא זה שמוצג והגודל הפיזי שלו יכול להיות קטן/גדול יותר מהפונט הסופי. 😎
ומה Next עושה? 😯
מורידה בזמן הbuild את קבצי הפונט פיזית לפרויקט כך שלא נצטרך עוד בקשות לגוגל אחרי הbuild. כמו כן היא עושה אופטימיזציה אוטומטית - ומייבאת רק את הקבצים הנחוצים (לדוגמא רק עברית אם זה מה שבחרתם או רק עובי מסוים אם זה מה שאתם צריכים). ובעזרת font-size-adjust מתאימה את גודל הפונט fallback לפונט שלכם למניעת תזוזות מרגיזות. כמובן שזה גם מונע מאיתנו תלות נוספת בגורם שלישי שאולי יהיה לא זמין, (למרות שאם השרתים של גוגל לא זמינים יתכן שסוף העולם הגיע ולמי אכפת מהחנות לקרמי לחות לתוכי דררה שלכם). ניתן גם לטעון (בסינטקסט טיפה שונה) גם קבצי פונט מקומיים לחלוטין - אם המעצבת שלכם רוצה שכל האתר יהיה בכתב יד של הבת שלה לדוגמא.
ואיך נתנהל עם שני פונטים שונים? 🙄
כאן יש מספר פתרונות נפוצים: 1. לעשות export של המשתנה של הfont (משתנה js) לדוגמא roberto ובכל מקום שרוצים להשתמש בו נכתוב roberto.className בclassName של האלמנט הרצוי. 2. הדרך הנחמדה יותר לטעמי - היא להשתמש במאפיין variable המובנה, שבו ניתן להגדיר שם של משתנה css שיוחל אוטומטית על הפונט שייבאתם ומכאן ואילך בכל מקום שתרצו תוכלו להשתמש בvar(--my-font) או כל שם קודח אחר שנתתם. בעזרת שיטה 2 תוכלו גם להוסיף את הפונטים שייבאתם לtailwind בעזרת הוספה לקונפיגורציה של tailwind, או להגדיר בglobal שכל הh1 יהיו פונט בסטייל של ספר תורה. * ניתן לשלוט בהתנהגות הטעינה בעזרת המאפיין - display.
שתף את המאמר
נכתב על ידי
Yosefus Flavius
מתכנת מוכשר בחסד עליון ככה אומרים עלי כולם - לפחות בפרצוף שלי, אני אוהב ומעולה בלטייל ולתכנן טיולים בעיקר במדינות מגניבות, ואני צלם חובב כבר מעל 10 שנים.
עקבו באינסטגרם