פּעקל פאַנץ אין דיין וועב אַפּ

זיך-האָסטינג פאַנץ

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

ינסטאָלינג יעדער שריפֿט

צו ינסטאַלירן די פאַנץ איר ווילן צו נוצן, פשוט לויפן די ינסטאַלל-קאָמאַנד פֿאַר יעדער וואַריאַנט. די פאלגענדע קאָד סניפּאַץ ווייַזן ווי די שריפֿט פֿאַר דעם 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;
}

וואַריאַבלע פאַנץ

פאָנטסאָורס אויך גיט אַן אָפּציע צו ינסטאַלירן וועריאַבאַל פאַנץ, וואָס מיטל אַז איר האָבן אַקסעס צו די לעצטע מכשירים ווען עס קומט צו לאָודינג פון שריפֿט. ביטע טאָן אַז ניט אַלע פאַנץ זענען בנימצא ווי בייַטעוודיק וועריאַנץ.