Là một newbie, bạn có lẽ con chật vật với React làm sao để thêm thư viện, tích hợp scss, thêm font cho ứng dụng thì đây sẽ là bài viết giúp bạn giải quyết vấn đề đã nêu ở tiêu đề.
Trong HTML, bạn sẽ thêm @font-face, font-family để thêm phông, kích thước (font, style) cho chữ. Trong React, bạn có thể thêm phông chữ bằng nhiều cách khác nhau. Bài viết này sẽ đưa ra 3 cách nhanh nhất để thêm phông chữ cho ứng dụng của bạn.
Sử dụng Font-link
Chúng ta có thể thêm liên kết phông chữ thông qua thông qua cách host và gán vào thẻ <link> bên trong tệp HTML.
Bây giờ, cùng cho ví dụ sử dụng Google Fonts kèm theo thẻ <link> trong HTML để thử cách đầu tiên nhé.
- Hãy đến đường dẫn http://fonts.google.com/
- Chọn Phông chữ mà bạn muốn.
- Chọn
select this font, đây là lựa chọn của bạn về độ đậm nhạt của chữ, tương ứng với thuộc tínhfont-weighttrong CSS. 
- Đi đến tệp
index.htmltrong dự án của bạn. Nếu khởi tạo bằngcreate-react-app, bạn sẽ tìm thấy nó trong thư mục public/. Và dán đoạn mã đã sao chép được bên trong tệp, ở mục<head> - Tiếp tục đến tệp CSS của bạn và thêm thuộc tính
font-family
Sử dụng Web Font Loader
Thư viện Web Font Loader hỗ trợ bạn tải các phông chữ từ Google Fonts, Typekit, Fonts.com. Bây giờ hãy cùng xem ví dụ làm thế nào để tải nhiều phông chữ từ các nguồn trên trong React Component.
Cài đặt webfontloader
yarn add webfontloader
hoặc
npm i webfontloader
Import vào component của bạn
import WebFont from 'webfontloader'
Đặt Component WebFont vào bên trong Hook useEffect và điền các tên phông chữ mong muốn. Sau khi component render các Phông chữ sẽ được tải.
Bạn có thể gọi WebFont bên trong tệp App
useEffect(() => {
WebFont.load({
google: {
families: ['Droid Sans', 'Roboto', Chilanka']
}
})
}, [])
Bây giờ bạn có thể sử dụng style hoặc className để đặt phông chữ cho ứng dụng của mình
// ../styles.css
.roboto {
font-family: 'roboto'
}
// ../component.jsx
<h1 className="roboto">Hello world</h1>
hoặc viết thẳng vào style inline như thế này
<div style={{fontFamily: 'roboto'}}>...</div>
Sử dụng @font-face
Trong vài trường hợp, bạn có thể không được phép kết nối online với các đường dẫn phông chữ như phía trên. Ứng dụng của bạn chỉ sử dụng thông qua dạng intranet và không cho phép truy cập Internet hoặc những phông chữ độc quyền, không hề được cung cấp miễn phí từ các kho chứa phía trên.
@font-face là một quy tắc định nghĩa phông chữ trong CSS. Để triển khi, thực hiện các bước như sau
- Tạo thư mục với tên src/fonts
- Tải phông chữ được yêu cầu vào thư mục src/fonts. Cho ví dụ, chúng ta sẽ tải 2 fonts, Goldman, Lobster.
- Tiếp đến, thêm fonts vào bên trong tệp
index.js.
import './fonts/Goldman/Goldman-Bold.ttf'
- Và thêm
@font-facebên trong css
@font-face {
font-family: "GoldmanBold";
src: local("GoldmanBold"), url("./fonts/Goldman/Goldman-Bold.ttf") format ("truetype");
font-weight: bold
}
- Bây giờ thỉ cần thêm className hoặc style tên với tên font đã định nghĩa
font-family: GoldmanBold
Mình đã tham khảo qua các bài viết: https://blog.greenroots.info/3-quick-ways-to-add-fonts-to-your-react-app-ckjo6jbgd084w8ls1d7xp05qj