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

توجد العديد من الطرق لعمل ذلك فمثلاً يمكنك استخدام ال 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

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";
}