• 0

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

 

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

انشر على الشّبكات الاجتماعية


رابط هذه المساهمة
شارك على الشبكات الإجتماعية
  • 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

2 اشخاص أعجبوا بهذا

انشر على الشّبكات الاجتماعية


رابط هذه المساهمة
شارك على الشبكات الإجتماعية
  • 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";
}

 

انشر على الشّبكات الاجتماعية


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

يجب أن تكون عضوًا لدينا لتتمكّن من التعليق

انشاء حساب جديد

يستغرق التسجيل بضع ثوان فقط


سجّل حسابًا جديدًا

تسجيل الدخول

تملك حسابا مسجّلا بالفعل؟


سجّل دخولك الآن