كيفية إضافة خطوط الويب إلى موقع ويب Next.js

تعد خطوط الويب طريقة رائعة لإضافة خطوط مخصصة إلى موقع الويب الخاص بك. قد لا تكون هذه الخطوط متاحة على نظام المستخدم ، لذلك تحتاج إلى تضمينها في مشروعك من خلال استضافتها أو الرجوع إليها عبر CDN.

تعرف على كيفية تضمين خطوط الويب في موقع ويب Next.js باستخدام هاتين الطريقتين.

اجعل فيديو اليوم

استخدام الخطوط ذاتية الاستضافة في Next.js

لإضافة خطوط ذاتية الاستضافة في Next.js ، تحتاج إلى ذلك استخدم قاعدة @ font-face CSS . تتيح لك هذه القاعدة إضافة خطوط مخصصة إلى صفحة الويب.

البحث عن الموسيقى وتنزيلها مجانًا

قبل استخدام font-face ، يجب عليك تنزيل الخطوط التي تريد استخدامها. هنالك الكثير مواقع على الإنترنت تقدم خطوطًا مجانية ، بما في ذلك خطوط Google و fontspace و dafont.

بمجرد تنزيل خطوط الويب ، قم بتحويلها إلى تنسيقات خطوط مختلفة لدعم متصفحات متعددة. يمكنك استخدام أدوات تحويل الخطوط المجانية عبر الإنترنت لنفعل ذلك. تدعم متصفحات الويب الحديثة تنسيقات .woff و. woff2. إذا كنت بحاجة إلى دعم المتصفحات القديمة ، فيجب عليك أيضًا توفير تنسيقات .eot و. ttf.

قم بإنشاء مجلد جديد يسمى الخطوط في دليل موقعك واحفظ ملفات الخطوط المحولة هناك.

الخطوة التالية هي تضمين وجوه الخطوط في ملف الأنماط / 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 باستخدام علامة الارتباط أو قاعدة الاستيراد @ داخل ملف CSS.

كيفية استيراد الخطوط إلى مشروع Next.js باستخدام علامة ارتباط

تنتقل علامة الارتباط دائمًا داخل علامة الرأس لمستند HTML. لإضافة علامة رأس في 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 الذي تريد استخدام الخط فيه.

تثبيت ويندوز من أندرويد بدون روت

على سبيل المثال ، اجعل الخط متاحًا عبر المشروع بأكمله عن طريق استيراد خط الويب بتنسيق الأنماط / global.css ملف.

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

يمكنك الآن الرجوع إلى عائلة الخطوط بتنسيق محدد CSS مثله:

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

تسمح لك قاعدةimport باستيراد خط في ملف CSS مضمن. يؤدي استخدام علامة الارتباط إلى تسهيل الوصول إلى الخط عبر الموقع بالكامل.

هل يجب عليك استضافة الخطوط محليًا أم استيرادها عبر شبكة توصيل المحتوى؟

عادةً ما تكون الخطوط المستضافة محليًا أسرع من الخطوط المستوردة من CDN. هذا لأن المتصفح لا يضطر إلى تقديم طلب إضافي إلى الخط CDN بمجرد تحميل صفحة الويب.

إذا كنت تريد استخدام الخطوط المستوردة ، فقم بتحميلها مسبقًا لتحسين أداء الموقع. إذا كانت الخطوط متاحة على خطوط Google أو Typekit ، فيمكنك استيرادها والاستفادة من ميزات تحسين Next.js.