نحوه استفاده از فونت های Google در React Js با Tailwind CSS

 rel="preconnect" href="https://fonts.googleapis.com">
 rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
 href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600;700&display=swap" rel="stylesheet">

این روش ساده است و قلم را برای کل برنامه شما بار می کند.

2. واردات در پرونده CSS Tailwind خود را در جایی که خود دارید

از طرف دیگر ، می توانید فونت های Google را در پرونده CSS خود وارد کنید. موارد زیر را در بالای پرونده اصلی CSS خود اضافه کنید (مانند src/assets/main.css):

@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600;700&display=swap');

@tailwind base;
@tailwind components;
@tailwind utilities;

هر دو روش معتبر هستند. من معمولاً روش پیوند HTML را برای کنترل بهتر فرآیند بارگذاری انتخاب می کنم.

پیکربندی CSS Tailwind برای استفاده از فونت های Google

پس از در دسترس بودن فونت های Google ، باید به CSS Tailwind در مورد آنها اطلاع دهید.

خود را باز کنید tailwind.config.js پرونده و به روزرسانی theme.extend بخش برای شامل قلم انتخابی شما. به عنوان مثال:

module.exports = {
  content: [
    "./src/**/*.{js,jsx,ts,tsx}",
  ],
  theme: {
    extend: {
      fontFamily: {
        sans: ['"Open Sans"', 'sans-serif'],
      },
    },
  },
  plugins: [],
}

این به Tailwind می گوید که از “Open Sans” به عنوان بخشی از پیش فرض استفاده کند sans خانواده قلم.

اکنون ، هر زمان که از آن استفاده می کنید font-sans کلاس در HTML یا JSX خود ، متن شما با استفاده از “Open Sans” نمایش داده می شود.

با استفاده از فونت های Google در مؤلفه های React

بیایید همه چیز را در یک جزء React جمع کنیم. در اینجا یک مثال ساده وجود دارد:

import React from 'react';

function App() {
  return (
    <div className="min-h-screen bg-gray-100 p-8">
      <h1 className="text-4xl font-bold font-sans text-gray-900 mb-4">
        Welcome to My App
      h1>
      <p className="text-lg font-sans text-gray-700">
        I built this using React JS and styled it with Tailwind CSS, featuring the clean and modern look of Google Fonts.
      p>
    div>
  );
}

export default App;

در این مثال ، font-sans کلاس قلم “باز” ​​باز “را هم برای عنوان و هم در پاراگراف اعمال می کند. بقیه کلاسهای Tailwind به سبک کردن چیدمان و فاصله کمک می کنند.

نکات اضافی و بهترین روشها

• فونت های از پیش بارگذاری:
  برای بهبود زمان بار ، از پیش بارگذاری خود را در نظر بگیرید. می توانید یک لینک از پیش بار در HTML خود اضافه کنید:

   rel="preload" as="style" href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600;700&display=swap">

• وزن قلم:

  فقط وزنهای مورد نیاز خود را بارگیری کنید. این به کاهش میزان داده های کاربران شما برای بارگیری کمک می کند. Google Fonts به شما امکان می دهد مشخص کنید که کدام وزن در URL بارگیری می شود.

• Fallbacks:

  همیشه در صورت عدم بارگذاری فونت Google ، فونت های برگشتی را تعریف کنید. در Tailwind ، من این کار را با تنظیم پارامتر دوم در fontFamily آرایه

• عملکرد:

  برای حسابرسی عملکرد برنامه خود از ابزارهایی مانند Lighthouse استفاده کنید. مهم است که سایت خود را سریع نگه دارید و بارگیری مناسب قلم بخشی از آن است.

• آزمایش با قلم:

  قلم های مختلف را امتحان کنید تا ببینید چه چیزی متناسب با طراحی شما است. Google Fonts یک مجموعه عظیم دارد و گاهی اوقات یک تغییر ساده می تواند تفاوت بزرگی در تجربه کاربر ایجاد کند.

متداول

آیا هنگام استفاده از فونت های Google باید در مورد سازگاری مرورگر نگران باشم؟

فونت های Google برای کار در تمام مرورگرهای مدرن طراحی شده اند. فقط اطمینان حاصل کنید که صحیح را شامل می شوید یا @import بیانیه در پروژه شما

چگونه می توانم سرعت بارگیری فونت های Google را بهبود ببخشم؟

توصیه می کنم استفاده از preconnect وت preload پیوندها در HTML شما. این به مرورگر اجازه می دهد تا فونت ها را سریعتر واکشی کند.

آیا می توانم از چندین قلم گوگل در یک پروژه واحد استفاده کنم؟

بله ، می توانید چندین فونت را با استفاده از چندگانه اضافه کنید برچسب ها در HTML یا وارد کردن آنها در CSS شما. فقط پیکربندی Tailwind خود را به روز کنید تا فونت های جدید را منعکس کنید.

اگر فونت من به درستی بارگیری نشود ، چه می شود؟

اطمینان حاصل کنید که پیوند یا واردات صحیح است ، هرگونه خطای شبکه را بررسی کنید و تأیید کنید که پیکربندی Tailwind شما برای استفاده از قلم تنظیم شده است.

منابع بیشتر

• قلم های گوگل:

  برای کشف انواع فونت های موجود ، به Google Fonts مراجعه کنید. این یک منبع خارق العاده برای یافتن نگاه مناسب برای پروژه شما است.

• مستندات Tailwind CSS:

  برای اطلاعات بیشتر در مورد نحوه سفارشی کردن طراحی خود و استفاده بیشتر از کلاسهای ابزار Tailwind ، مستندات Tailwind CSS را بررسی کنید.

• مستندات واکنش:

  برای بینش های بیشتر در مورد مؤلفه های ساختمان و مدیریت وضعیت ، مستندات React مکانی عالی برای شروع است.

• ابزارهای حسابرسی عملکرد:

  ابزارهایی مانند Google Lighthouse می توانند به شما در شناسایی و رفع مشکلات عملکرد از جمله بارگیری قلم کمک کنند.

پایان

ادغام فونت های Google با React JS و Tailwind CSS نه تنها جذابیت بصری سایت شما را تقویت می کند بلکه تجربه کلی کاربر را نیز بهبود می بخشد.

من فهمیدم که این تنظیم ساده می تواند یک برنامه اساسی را به چیزی تبدیل کند که بسیار تصفیه و حرفه ای تر باشد.

با راهنمای گام به گام و نکات ارائه شده در اینجا ، اکنون همه چیز را برای شروع آزمایش با قلم در پروژه های خود دارید.

قبل از اینکه من بپیچم ، دوست دارم افکار شما را بشنوم: هنگام کار با فونت های Google در React JS با Tailwind CSS با چه چالش ها یا ایده های خلاقانه ای روبرو شده اید؟