use googlefonts - use googlefonts

use googlefonts

Pengunduhan font

1.0.0

Unduh

@flyyer/use-googlefonts

React hook untuk memuat Google Fonts V2 ketika Anda tidak dapat mendefinisikan a priori font yang diharapkan pada <head /> .

Jika Anda tahu font spesifik apa yang Anda butuhkan pada proyek Anda, Anda harus menghilangkan perpustakaan ini dan memasukkan tag <link /> secara langsung di <head /> html Anda melalui react-helmet atau next/head jika Anda menggunakan next.js.

Kami membuat kait ini untuk flyyer.io untuk memungkinkan pengembang membuat templat dengan font dengan cepat agar sesuai dengan setiap gaya font yang disukai pengguna. Tempate tersebut digunakan untuk membuat gambar sosial dan pemasaran.

Penggunaan

Instal ketergantungan ini:

yarn add @flyyer/use-googlefonts

Penggunaan kasus umum:

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

Untuk meningkatkan kinerja dan kecepatan, disarankan untuk menambahkan tag pra-koneksi berikut di <head /> HTML Anda.

Ini dilakukan secara otomatis jika Anda menggunakan @flyyer/cli jadi lewati bagian ini jika Anda membuat dek Anda dengan create-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 >