כיצד להוסיף גופני אינטרנט לאתר Next.js

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

למד כיצד לכלול גופני אינטרנט באתר Next.js באמצעות שתי השיטות הללו.

כיצד למצוא גורים למכירה

איפור של סרטון היום

שימוש בגופנים באירוח עצמי ב-Next.js

כדי להוסיף גופנים שמתארחים בעצמך ב-Next.js, אתה צריך השתמש בכלל ה-CSS @font-face . כלל זה מאפשר לך להוסיף גופנים מותאמים אישית לדף אינטרנט.

לפני השימוש ב-font-face, עליך להוריד את הגופנים שבהם ברצונך להשתמש. יש הרבה אתרים באינטרנט המציעים גופנים בחינם , כולל אתרי גוגל גופנים, fontspace ו-dafont.

לאחר הורדת גופני האינטרנט, המר אותם לפורמטים שונים של גופן כדי לתמוך במספר דפדפנים. אתה יכול להשתמש כלי המרת גופנים מקוונים בחינם לעשות זאת. דפדפני אינטרנט מודרניים תומכים בפורמטים .woff ו-.woff2. אם אתה צריך לתמוך בדפדפנים מדור קודם, עליך לספק גם פורמטים .eot ו-.ttf.

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

השלב הבא הוא לכלול את פני הגופנים ב- styles/global.css קובץ כדי להפוך אותם לזמינים לכל האתר. דוגמה זו מציגה את פני הגופן של הגופן בתולת הים בהדגשה:

@font-face { 
    font-family: 'Mermaid'; 
    src: url('Mermaid-Bold.eot'); 
    src: url('Mermaid-Bold.eot?#iefix') format('embedded-opentype'), 
        url('Mermaid-Bold.woff2') format('woff2'), 
        url('Mermaid-Bold.woff') format('woff'), 
        url('Mermaid-Bold.ttf') format('truetype'); 
    font-weight: bold; 
    font-style: normal; 
    font-display: swap; 
}

לאחר שתכלול את קובצי הגופן, תוכל להשתמש בגופנים האלה בקובץ CSS ברמת הרכיב:

h1 { 
    font-family: Mermaid; 
}

כולל גופני אינטרנט ל-Next.js דרך CDN

חלק מהאתרים מגישים גופני אינטרנט דרך CDN שתוכל לייבא לאפליקציה שלך. גישה זו קלה להגדרה מכיוון שאינך צריך להוריד גופנים או ליצור פני גופנים. בנוסף, אם אתה משתמש בגופני Google או TypeKit, Next.js מטפל אוטומטית באופטימיזציה.

אתה יכול להוסיף גופנים מ-CDN באמצעות תג הקישור או הכלל @import בתוך קובץ CSS.

כיצד לייבא גופנים לפרויקט Next.js באמצעות תג קישור

תג הקישור תמיד נכנס לתג head של מסמך HTML. כדי להוסיף תג head ב-Next.js, עליך ליצור מסמך מותאם אישית. מסמך זה משנה את תג הראש והגוף המשמש לעיבוד כל עמוד.

התחל להשתמש בתכונת מסמך מותאמת אישית זו על ידי יצירת הקובץ /pages/_document.js.

לאחר מכן, כלול את הקישור לגופן בראש הקובץ _document.js.

import Document, { Html, Head, Main, NextScript } from "next/document"; 
class MyDocument extends Document { 
  static async getInitialProps(ctx) { 
    const initialProps = await Document.getInitialProps(ctx); 
    return { ...initialProps }; 
  } 
  render() { 
    return ( 
      <Html> 
        <Head> 
          <link 
            href="https://fonts.googleapis.com/css2?family=Libre+Caslon+Display&display=swap" 
            rel="stylesheet" 
          /> 
        </Head> 
        <body> 
          <Main /> 
          <NextScript /> 
        </body> 
      </Html> 
    ); 
  } 
} 
export default MyDocument;

כיצד להשתמש בכלל ה-@import כדי לכלול גופנים בפרויקט Next.js

אפשרות נוספת היא להשתמש בכלל ה-@import בקובץ ה-CSS שבו תרצה להשתמש בגופן.

פטל פאי החלף לנו מקלדת

לדוגמה, הפוך את הגופן לזמין בכל הפרויקט על ידי ייבוא גופן האינטרנט ב- styles/global.css קוֹבֶץ.

@import url('https://fonts.googleapis.com/css2?family=Libre+Caslon+Display&display=swap');

כעת תוכל להתייחס למשפחת הגופנים ב-a בורר CSS ככה:

h1 { 
    font-family:'Libre Caslon Display', serif; 
}

הכלל @import מאפשר לך לייבא גופן בקובץ CSS כלול. השימוש בתג הקישור הופך את הגופן לנגיש בכל האתר.

האם לארח גופנים באופן מקומי או לייבא אותם באמצעות CDN?

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

אם אתה רוצה להשתמש בגופנים מיובאים, טען אותם מראש כדי לשפר את ביצועי האתר. אם הגופנים זמינים בפונטים של גוגל או ב-Typekit, תוכלו לייבא אותם ולנצל את תכונות האופטימיזציה של Next.js.