Cài google font cho React (next.js) một cách dễ dàng

Xem hướng dẫn này để tích hợp Google Font một cách dễ dàng và nâng cao quy trình phát triển Next.js của bạn.

Để gắn Google Font vào dự án Next.js của bạn và sử dụng nó trong SCSS, bạn có thể làm theo các bước sau:

Tải font từ Google Fonts
Truy cập trang web Google Fonts (https://fonts.google.com/) và chọn font mà bạn muốn sử dụng. Sau đó, nhấp vào nút "Select this style" bên cạnh phiên bản font mà bạn muốn sử dụng.
Lấy mã nhúng (Embed code)
Sau khi chọn phiên bản font và cài đặt các tuỳ chọn khác (nếu có), bạn sẽ nhìn thấy một khung với mã nhúng. Chọn tab "Embed" và sao chép mã nhúng được cung cấp.

Thêm mã nhúng vào file HTML chính

Trong dự án Next.js, file HTML chính là file "_document.js" trong thư mục pages. Mở file "_document.js" và thêm mã nhúng vào phần thẻ Head như sau:

import Document, { Html, Head, Main, NextScript } from 'next/document'

class MyDocument extends Document {
  render() {
    return (
      <Html>
        <Head>
          {/* Thêm mã nhúng ở đây */}
          <link href="https://fonts.googleapis.com/css2?family=Font+Name&display=swap" rel="stylesheet" />
        </Head>
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    )
  }
}

export default MyDocument

Lưu ý thay thế 'Font+Name' bằng tên font mà bạn đã chọn.

Sử dụng Google Font trong SCSS
Bây giờ, bạn có thể sử dụng font đã nhúng trong SCSS của bạn. Trong file SCSS, bạn có thể định nghĩa các lớp CSS sử dụng font bằng cách chỉ định font-family như sau:
```
@import url('https://fonts.googleapis.com/css2?family=Font+Name&display=swap');

.my-text {
  font-family: 'Font Name', sans-serif;
}
```
Lưu ý rằng bạn cần nhập URL của Google Font và sử dụng tên font mà bạn đã chọn.
Sử dụng lớp CSS trong Next.js
Để sử dụng lớp CSS trong Next.js, bạn có thể thêm tên lớp vào các phần tử HTML trong file JSX. Ví dụ:
```
import React from 'react'
import styles from './styles.module.scss'

const MyComponent = () => {
  return <div className={styles.myText}>Hello, World!</div>
}

export default MyComponent
```
Bây giờ, lớp CSS myText sẽ được áp dụng cho phần tử div và font sẽ được áp dụng theo đúng yêu cầu.

Từ khoá: cài đặt font, cài đặt google font, next js font, cài font next js, cai font react, install custom font

Tác giả: Nguyễn Phúc Bảo Châu

Bài viết khác: Cách cài đặt font chữ cho Next.js 2023

Xem thêm: đố vui