Bagaimana cara menggunakan font Google di React.js?

Saya telah membangun situs web dengan React.js dan webpack .

Saya ingin menggunakan font Google di halaman web, jadi saya meletakkan link di bagian tersebut.

Google Fonts

<link href="https://fonts.googleapis.com/css?family=Bungee+Inline" rel="stylesheet">

Dan atur CSS

body{
    font-family: 'Bungee Inline', cursive;
}

Namun, itu tidak berhasil.

Bagaimana saya bisa mengatasi masalah ini?

Dalam beberapa jenis file CSS utama atau pertama yang dimuat, lakukan saja:

@import url('https://fonts.googleapis.com/css?family=Source+Sans+Pro:regular,bold,italic&subset=latin,latin-ext');

Anda tidak perlu membungkus dengan @ font-face, dll. Tanggapan yang Anda dapatkan dari API Google siap digunakan dan memungkinkan Anda menggunakan jenis font seperti biasa.

Kemudian di aplikasi utama React JavaScript Anda, di bagian atas letakkan sesuatu seperti:

import './assets/css/fonts.css';

Apa yang saya lakukan sebenarnya adalah membuat app.cssyang diimpor fonts.cssdengan sedikit impor font. Hanya untuk pengaturan (sekarang saya tahu di mana semua font saya). Hal penting untuk diingat adalah Anda mengimpor font terlebih dahulu.

Ingatlah bahwa setiap komponen yang Anda impor ke aplikasi React Anda harus diimpor setelah impor gaya. Apalagi jika komponen tersebut juga mengimpor gayanya sendiri. Dengan cara ini Anda bisa yakin tentang urutan gaya. Inilah sebabnya mengapa yang terbaik adalah mengimpor font di bagian atas file utama Anda (jangan lupa untuk memeriksa file CSS yang dibundel untuk memeriksa kembali apakah Anda mengalami masalah).

Ada beberapa opsi yang bisa Anda gunakan untuk menggunakan Google Font API agar lebih efisien saat memuat font, dll. Lihat dokumentasi resmi: Memulai Google Font API

Sunting, catatan: Jika Anda berurusan dengan aplikasi "offline", maka Anda mungkin perlu mengunduh font dan memuat melalui Webpack.

Font Google di React.js?

Buka stylesheet Anda yaitu app.css, style.css (nama apa yang Anda miliki), tidak masalah, cukup buka stylesheet dan tempel kode ini

@import url('https://fonts.googleapis.com/css?family=Josefin+Sans');

dan jangan lupa untuk mengubah URL font yang Anda inginkan, jika tidak berfungsi dengan baik

dan gunakan ini sebagai:

body {
  font-family: 'Josefin Sans', cursive;
}

Jika Anda menggunakan lingkungan Create React App, cukup tambahkan aturan @import ke index.css seperti:

@import url('https://fonts.googleapis.com/css?family=Anton');

Impor index.css di aplikasi React utama Anda:

import './index.css'

React memberi Anda pilihan gaya Inline, Modul CSS atau Komponen Bergaya untuk menerapkan CSS:

font-family: 'Anton', sans-serif;

Anda harus melihat tutorial ini: https://scotch.io/@micwanyoike/how-to-add-fonts-to-a-react-project

import WebFont from 'webfontloader';

WebFont.load({
  google: {
    families: ['Titillium Web:300,400,700', 'sans-serif']
  }
});

Saya baru saja mencoba metode ini dan saya dapat mengatakan bahwa itu bekerja dengan sangat baik;)

Di file CSS Anda, seperti App.css di aplikasi create-react, tambahkan impor fontface. Sebagai contoh:

@fontface {
  font-family: 'Bungee Inline', cursive;
  src: url('https://fonts.googleapis.com/css?family=Bungee+Inline')
}

Kemudian cukup tambahkan font ke elemen DOM dalam file css yang sama.

body {
  font-family: 'Bungee Inline', cursive;
}

Punya masalah yang sama. Ternyata saya menggunakan, "bukan '.

gunakan @import url('within single quotes');seperti ini

tidak @import url("within double quotes");seperti ini

Saya menambahkan @import dan @ font-face di file css saya dan berhasil.

Pilihan lain untuk semua jawaban yang bagus di sini adalah paket npm react-google-font-loader, ditemukan di sini .

Penggunaannya sederhana:

import GoogleFontLoader from 'react-google-font-loader';

// Somewhere in your React tree:

<GoogleFontLoader
    fonts={[
        {
            font: 'Bungee Inline',
            weights: [400],
        },
    ]}
/>

Maka Anda bisa menggunakan nama keluarga di CSS Anda:

body {
    font-family: 'Bungee Inline', cursive;
}

Penafian: Saya pembuat react-google-font-loaderpaket.

Jika ada yang mencari solusi dengan (.less) coba di bawah ini. Buka file utama atau kurang umum Anda dan gunakan seperti di bawah ini.

@import (css) url('https://fonts.googleapis.com/css?family=Open+Sans:400,700');

body{
  font-family: "Open Sans", sans-serif;
}

Berikut adalah dua cara berbeda untuk menambahkan font ke aplikasi react Anda.

Menambahkan font lokal

1. Buat folder baru bernama fontsdi srcfolder Anda .

2. Unduh font google secara lokal dan letakkan di dalam fontsfolder.

3. Buka index.cssfile Anda dan sertakan font dengan mereferensikan jalurnya.

@font-face {
  font-family: 'Rajdhani';
  src: local('Rajdhani'), url(./fonts/Rajdhani/Rajdhani-Regular.ttf) format('truetype');
}

Di sini saya menambahkan Rajdhanifont.

Sekarang, kita bisa menggunakan font kita di kelas css seperti ini.

.title{
    font-family: Rajdhani, serif;
    color: #0004;
}

Menambahkan font Google

Jika Anda ingin menggunakan google font (api) daripada font lokal, Anda dapat menambahkannya seperti ini.

@import url('https://fonts.googleapis.com/css2?family=Rajdhani:wght@300;500&display=swap');

Demikian pula, Anda juga dapat menambahkannya di dalam index.htmlfile menggunakan linktag.

<link href="https://fonts.googleapis.com/css2?family=Rajdhani:wght@300;500&display=swap" rel="stylesheet">

(awalnya diposting di https://reactgo.com/add-fonts-to-react-app/ )

Ini bisa menjadi tag tautan yang menutup sendiri di bagian akhir, coba:

<link href="https://fonts.googleapis.com/css?family=Bungee+Inline" rel="stylesheet"/> 

dan di file main.css Anda coba:

body,div {
  font-family: 'Bungee Inline', cursive;
}