JavaScript

3 Cách để thêm fonts cho ứng dụng React

7.474 lượt xem - Thời gian đọc: 2 phút đọc

3 Cách để thêm fonts cho ứng dụng React

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é.

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

	import './fonts/Goldman/Goldman-Bold.ttf'
@font-face {
	font-family: "GoldmanBold";
	src: local("GoldmanBold"), url("./fonts/Goldman/Goldman-Bold.ttf") format ("truetype");
	font-weight: bold
}

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

Bài viết liên quan