Thu thuat

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

00 min
31-07-2023
rate
type
status
date
slug
summary
tags
category
icon
password
rateNumber
Cài Google Font cho React (next.js) một cách dễ dàng

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

 
Hướng dẫn này sẽ giới thiệu cách cài đặt Google Font một cách dễ dàng cho dự án Next.js của bạn. Bạn sẽ được hướng dẫn chi tiết từ việc tải font từ Google Fonts, cách nhúng font vào dự án Next.js và sử dụng font trong các file SCSS. Tất cả đều được giải thích một cách dễ hiểu với các bước cụ thể. Nếu bạn đang phát triển dự án Next.js và muốn tích hợp Google Font vào dự án của mình, hãy tiếp tục đọc bài viết này!
 
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:
 
  1. Tải font từ Google Fonts
      2. 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.
       
  1. Lấy mã nhúng (Embed code)
      2. 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.
       
  1. Thêm mã nhúng vào file HTML chính
      2. 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:
       
       
      Lưu ý thay thế 'Font+Name' bằng tên font mà bạn đã chọn.
       
  1. Sử dụng Google Font trong SCSS
      2. 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:
       
       
      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.
       
  1. Sử dụng lớp CSS trong Next.js
      2. Để 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ụ:
       
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.
 
Vậy là bạn đã biết cách cài đặt Google Font cho dự án Next.js của mình một cách dễ dàng rồi đấy! Các bước trên sẽ giúp bạn tích hợp font vào dự án của mình một cách nhanh chóng và dễ dàng hơn. Nếu bạn còn gặp bất kỳ vấn đề gì, hãy để lại bình luận bên dưới để chúng tôi có thể giúp bạn.
 
Chúc may mắn và thành công!
 
Tác giả: Bảo Châu - 31/07/2023
 
Từ khoá chính: lập trình, nextjs, cài font chữ, font chữ, phần mềm, phần mềm đào tạo, đào tạo nhân sự, bảo châu, nguyễn phúc bảo châu, thật thú vị
 
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