Tùy chỉnh Font chữ trong Tailwind Css

Dưới đây là cách tôi thay đổi font chữ mặc định của tailwind css thành font chữ mặc định tùy trong dự án Nextjs của mình.

1. Tải font chữ tùy chỉnh của bạn (ví dụ: ProximaNova)

Tải về và lưu font chữ của bạn tại thư mục công khai: /public/fonts
image

2. Thêm @font-face vào tệp globals.css như bên dưới

@tailwind base;
@tailwind components;
@tailwind utilities;

@font-face {
  font-family: ProximaNova;
  font-display: swap;
  font-style: normal;
  src: url(../public/fonts/36572D_0_0.eot?display=swap);
  src: url(../public/fonts/36572D_0_0.eot?display=swap#iefix)
      format('embedded-opentype'),
    url(../public/fonts/36572D_0_0.woff2?display=swap) format('woff2'),
    url(../public/fonts/36572D_0_0.woff?display=swap) format('woff'),
    url(../public/fonts/36572D_0_0.ttf?display=swap) format('truetype');
}

Xóa bất kỳ họ phông chữ nào khác đang được sử dụng trong tệp này.

3. Chỉnh sửa tệp tailwind.config.js như sau:

// tailwind.config.js
// Sử dụng font `ProximaNova` làm mặc định, và font mặc định của Tailwind làm font dự phòng
const defaultTheme = require('tailwindcss/defaultTheme');

module.exports = {
  darkMode: 'class',
  content: [
    './pages/**/*.{js,ts,jsx,tsx}',
    './components/**/*.{js,ts,jsx,tsx}',
  ],
  theme: {
    fontFamily: {
      sans: ['ProximaNova', ...defaultTheme.fontFamily.sans],
    },
  },
// .....

Lưu ý: xóa extend: {} khỏi theme: {}


Vậy là xong, bây giờ bạn có thể sử dụng công cụ như Whatfont để kiểm tra

image