צרור גופנים באפליקציית האינטרנט שלך

גופנים לאירוח עצמי

אם אתה רוצה לאגד את הגופנים המשמשים באפליקציית האינטרנט שלך, Fontsource היא ספרייה שאולי תרצה להסתכל עליה (קישור גם בתוספת בסוף העמוד). זה מאפשר לך להתקין את הגופנים שאתה רוצה לצרוך, מה שאומר שהגופנים שלך מתארחים בעצמך ואינם דורשים CDN כדי לטעון.

התקנת כל פונט

כדי להתקין את הגופנים שבהם ברצונך להשתמש, פשוט הפעל את הפקודה install עבור כל גרסה. קטעי הקוד הבאים מראים כיצד יותקן הגופן עבור PWA זה.

npm install @fontsource/work-sans

בנקודת הכניסה של האפליקציה שלי, אז אני צריך לצרוך את החבילה המותקנת על ידי ייבוא שלה. זה מאפשר לי להגדיר במדויק מה אני צריך מבלי להוסיף תקורה כלשהי. מכיוון שגופנים יכולים להיות גדולים למדי, זו הזדמנות מצוינת לחסוך בתים.

import "@fontsource/work-sans/400.css";
import "@fontsource/work-sans/900-italic.css";

לבסוף, אני צריך להגדיר את משפחת הגופנים ב-CSS שלי. בהתאם לספרייה שבה אתה משתמש (לדוגמה Tailwind.css), קוד זה עשוי להיראות מעט שונה עבורך.

body {
  font-family: "Work Sans", sans-serif;
}

גופנים משתנים

Fontsource מספק גם אפשרות להתקנת גופנים משתנים, מה שאומר שיש לך גישה לכלים העדכניים ביותר בכל הנוגע לטעינת גופנים. שים לב שלא כל הגופנים זמינים כווריאציות משתנות.