Cách sử dụng phông chữ Google trong React.js?

Tôi đã xây dựng một trang web với React.js và webpack .

Tôi muốn sử dụng phông chữ của Google trong trang web, vì vậy tôi đã đặt liên kết trong phần.

Phông chữ Google

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

Và đặt CSS

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

Tuy nhiên, nó không hoạt động.

Làm thế nào tôi có thể giải quyết vấn đề này?

Trong một số loại tệp CSS chính hoặc tải đầu tiên, chỉ cần thực hiện:

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

Bạn không cần phải bọc trong bất kỳ loại @ font-face nào, v.v. phản hồi bạn nhận được từ API của Google đã sẵn sàng hoạt động và cho phép bạn sử dụng các họ phông chữ như bình thường.

Sau đó, trong JavaScript ứng dụng React chính của bạn, hãy đặt một cái gì đó như:

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

Những gì tôi đã làm thực sự được thực hiện là một app.cssnhập khẩu fonts.cssvới một số nhập khẩu phông chữ. Đơn giản là cho tổ chức (bây giờ tôi biết tất cả các phông chữ của tôi ở đâu). Điều quan trọng cần nhớ là bạn nhập phông chữ trước.

Hãy nhớ rằng bất kỳ thành phần nào bạn nhập vào ứng dụng React đều phải được nhập sau khi nhập kiểu. Đặc biệt nếu những thành phần đó cũng nhập kiểu dáng riêng của chúng. Bằng cách này, bạn có thể chắc chắn về thứ tự của các phong cách. Đây là lý do tại sao tốt nhất bạn nên nhập phông chữ ở đầu tệp chính của bạn (đừng quên kiểm tra tệp CSS đi kèm cuối cùng của bạn để kiểm tra lại xem bạn có gặp sự cố không).

Có một số tùy chọn bạn có thể vượt qua API Phông chữ của Google để hiệu quả hơn khi tải phông chữ, v.v. Xem tài liệu chính thức: Bắt đầu với API Phông chữ của Google

Chỉnh sửa, lưu ý: Nếu bạn đang xử lý một ứng dụng "ngoại tuyến", thì bạn có thể thực sự cần tải xuống các phông chữ và tải qua Webpack.

Phông chữ Google trong React.js?

Mở biểu định kiểu của bạn, tức là app.css, style.css (bạn có tên gì), không quan trọng, chỉ cần mở biểu định kiểu và dán mã này

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

và đừng quên thay đổi URL của phông chữ mà bạn muốn, các phông chữ khác hoạt động tốt

và sử dụng cái này như:

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

Nếu bạn đang sử dụng môi trường Tạo ứng dụng React, chỉ cần thêm quy tắc @import vào index.css như sau:

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

Nhập index.css trong ứng dụng React chính của bạn:

import './index.css'

React cung cấp cho bạn sự lựa chọn về kiểu nội tuyến, Mô-đun CSS hoặc Thành phần được tạo kiểu để áp dụng CSS:

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

bạn nên xem hướng dẫn này: 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']
  }
});

Tôi vừa thử phương pháp này và tôi có thể nói rằng nó hoạt động rất tốt;)

Trong tệp CSS của bạn, chẳng hạn như App.css trong ứng dụng tạo-phản ứng, hãy thêm nhập kiểu chữ. Ví dụ:

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

Sau đó, chỉ cần thêm phông chữ vào phần tử DOM trong cùng một tệp css.

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

Có cùng một vấn đề. Hóa ra tôi đã sử dụng "thay vì '.

sử dụng @import url('within single quotes');như thế này

không @import url("within double quotes");như thế này

Tôi đã thêm @import và @ font-face vào tệp css của mình và nó đã hoạt động.

Một tùy chọn khác cho tất cả các câu trả lời hay ở đây là gói npm react-google-font-loader, được tìm thấy tại đây .

Cách sử dụng rất đơn giản:

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

// Somewhere in your React tree:

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

Sau đó, bạn chỉ có thể sử dụng họ trong CSS của mình:

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

Tuyên bố từ chối trách nhiệm: Tôi là tác giả của react-google-font-loadergói.

Nếu ai đang tìm kiếm giải pháp với (.less), hãy thử bên dưới. Mở tệp chính hoặc tệp ít phổ biến hơn của bạn và sử dụng như bên dưới.

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

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

Nó có thể là thẻ tự đóng của liên kết ở cuối, hãy thử:

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

và trong tệp main.css của bạn, hãy thử:

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

Đây là hai cách khác nhau để bạn có thể thêm phông chữ vào ứng dụng phản ứng của mình.

Thêm phông chữ cục bộ

1. Tạo một thư mục mới có tên fontstrong srcthư mục của bạn .

2. Tải xuống cục bộ các phông chữ google và đặt chúng vào bên trong fontsthư mục.

3. Mở index.csstệp của bạn và bao gồm phông chữ bằng cách tham chiếu đường dẫn.

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

Ở đây tôi đã thêm một Rajdhaniphông chữ.

Bây giờ, chúng ta có thể sử dụng phông chữ của mình trong các lớp css như thế này.

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

Thêm phông chữ Google

Nếu bạn thích sử dụng phông chữ google (api) thay vì phông chữ cục bộ, bạn có thể thêm nó như thế này.

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

Tương tự, bạn cũng có thể thêm nó vào bên trong index.htmltệp bằng linkthẻ.

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

(ban đầu được đăng tại https://reactgo.com/add-fonts-to-react-app/ )