use googlefonts - use googlefonts

use googlefonts

تحميل الخط

1.0.0

تنزيل

@flyyer/use-googlefonts

رد فعل على تحميل Google Fonts V2 عندما لا يمكنك تحديد خط المسبق المتوقع على <head /> .

إذا كنت تعرف الخط المحدد الذي تحتاجه في مشروعك ، فيجب عليك حذف هذه المكتبة وإدراج علامات <link /> مباشرة في <head /> من html عبر react-helmet أو next/head إذا كنت تستخدم Next.js.

لقد جعلنا هذا الخطاف لـ flyyer.io لتمكين المطورين من إنشاء قوالب مع خطوط على الطيران لتتناسب مع كل مستخدم لتصميم الخط. يتم استخدام هذه المنقذات لإنشاء صور اجتماعية وتسويقية.

الاستخدام

تثبيت هذا التبعية:

yarn add @flyyer/use-googlefonts

استخدام الحالة الشائعة:

 import React from "react" ;
import { useGoogleFonts , GoogleFontsStatus } from "@flyyer/use-googlefonts" ;

function App ( ) {
  const font = useGoogleFonts ( [
    {
      family : "Cabin" , // Family Name
      styles : [
        "600..700" , // Range, if family supports it.
        "100..200italic" , // Range with italic
        "300italic" , // Weight with italic
        "regular" , // Shortcut to 400
        "italic" , // Shortcut to 400 Italic
        "500" , // Regular with weight
        444 , // Regular weight for variable font
      ] ,
    } ,
    {
      family : "Roboto" , // Family Name - Roboto doesn't support ranges
      styles : [
        "300italic" , // Weight with italic
        "regular" , // Shortcut to 400
        "italic" , // Shortcut to 400 Italic
        "500" ,
        100 ,
      ] ,
    } ,
  ] ) ;

  if ( font . status === GoogleFontsStatus . FAILED ) {
    console . log ( font . error ) ;
  } else {
    console . log ( font . href ) ;
    // https://fonts.googleapis.com/css2?family=Cabin:ital,wght@0,400;0,444;0,500;0,600..700;1,100..200;1,300;1,400;1,600..700&family=Roboto:ital,wght@0,100;0,400;0,500;1,300;1,400&display=auto
  }

  return (
    // Use .flyyer-wait class to prevent premature renders while the font is still loading.
    < div className = { googleFont . status === GoogleFontsStatus . LOADING && "flyyer-wait" } >
      < p style = { { fontFamily : "'Cabin', sans-serif" } } >
        Almost before we knew it, we had left the ground.
      </ p >
    </ div >
  ) ;
}

لتحسين الأداء والسرعة ، يوصى بإضافة علامات التوصيل المسبق التالية في <head /> من HTML الخاص بك.

يتم ذلك تلقائيًا إذا كنت تستخدم @flyyer/cli ، لذا تخطي هذا القسم إذا قمت بإنشاء سطح السفينة الخاص بك مع إنشاء flyyer-app

 < html >
  < head >
    < link rel =" preconnect " href =" https://fonts.gstatic.com " crossorigin >
    < link rel =" preconnect " href =" https://fonts.googleapis.com " crossorigin >
  </ head >
  < body >
    ...
  </ body >
</ html >