اذهب إلى المحتوى
  • 0

كيفية إضافة خطوط جوجل في مشروع React - Gatsby؟

Adam Ebrahim

السؤال

 

بدأت مؤخرًا بتعلم مكتبة Gatsby بناء مشاريع React ،  وأحاول أن أضيف خطوط جوجل إلى المشروع ولكن عندما أضيف الخط بإستخدام عنصر link إلى public/index.html ، فإنه يعمل في وضع التطوير development mode. لكن عندما أقوم ببناء  الموقع build، تتم إعادة تعيين index.html. لذلك أعتقد أن هناك طريقة أخرى لإضافة الخط؟ أو هل توجد طريقة لتسهيل إضافة الخطوط لأني أريد أن أضيف الكثير من الخطوط في المستقبل؟

رابط هذا التعليق
شارك على الشبكات الإجتماعية

Recommended Posts

  • 0

توجد العديد من الطرق لعمل ذلك فمثلاً يمكنك استخدام ال fonts من خلال ملفات ال css كالتالي

@import url('https://fonts.googleapis.com/css?family=Roboto');

html {
  font-family: 'Roboto', sans-serif;
}

أو يمكنك استخدام الإضافة gatsby-plugin-google-fonts حيث تقوم بإضافة الخطوط المستخدمة  يمكنك تثبيت الإضافة كالتالي

yarn add gatsby-plugin-google-fonts
// أو
npm install gatsby-plugin-google-fonts --save

ثم إضافة الخطوط في ملف ال gatsby-config.js كالتالي

module.exports = {
  siteMetadata: {
    title: `I like Google fonts`
  },
  plugins: [
    {
      resolve: `gatsby-plugin-google-fonts`,
      options: {
        fonts: [
          `limelight`,
          `source sans pro\:300,400,400i,700` //style وال  weight يمكنك أيضاً تحديد ال 
        ],
        display: 'swap'
      }
    }
  ]
}

قم بالإطلاع على المزيد من المعلومات من خلال موقع Gatsby

رابط هذا التعليق
شارك على الشبكات الإجتماعية

  • 0

Fontsource هو  monorepo مليء بخطوط مفتوحة المصدر ذاتية الاستضافة مجمعة في حزم NPM الفردية مستوحى من مشروع Typefaces القديم وتم إنشاؤه بشكل أساسي باستخدام Google Font Metadata.

مثال حول اظافة خط open sans

npm install @fontsource/open-sans

في gatsby-browser.js

import "@fontsource/open-sans"

ثم يمكنك استخدامه بسهولة 

body {
  font-family: "Open Sans";
}

 

رابط هذا التعليق
شارك على الشبكات الإجتماعية

انضم إلى النقاش

يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.

زائر
أجب على هذا السؤال...

×   لقد أضفت محتوى بخط أو تنسيق مختلف.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   جرى استعادة المحتوى السابق..   امسح المحرر

×   You cannot paste images directly. Upload or insert images from URL.

  • إعلانات

  • تابعنا على



×
×
  • أضف...