Công cụ miễn phí, không cần đăng ký

Website này dùng font chữ gì?

Dán một URL để xem trang web dùng những font chữ nào, kèm độ đậm, cỡ chữ và nơi mỗi font xuất hiện. Miễn phí, không cần đăng ký. Xem các ví dụ như font chữ của Anthropic và font chữ của Airbnb, hoặc tìm hiểu DESIGN.md bổ sung thêm những gì.

Thử

Dùng các font này trong code của bạn

Công cụ cho bạn tên họ font, độ đậm và nơi mỗi font được dùng cho văn bản. Để tái sử dụng, hãy tải mỗi họ font một lần, gán cho mỗi vai trò một biến CSS và luôn kết thúc font stack bằng các font dự phòng, để chữ vẫn hiển thị trong lúc font đang tải hoặc khi font tải thất bại.

1. Tải font. Với họ font trên Google Fonts, hãy thêm thẻ <link> của nó hoặc dùng next/font/google, và chỉ yêu cầu những độ đậm mà công cụ đã liệt kê. Với font thương mại, hãy mua giấy phép web từ xưởng font và phục vụ các tệp font bằng @font-face.

2. Đặt tên cho các vai trò. Mỗi việc một biến: display cho tiêu đề, body cho văn bản thường, mono cho code. Thay tên họ font bằng các font bạn tìm được.

:root {
  --font-display: "Inter Display", "Inter", system-ui, sans-serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", monospace;
}

h1, h2, h3 { font-family: var(--font-display); font-weight: 600; }
body { font-family: var(--font-body); font-weight: 400; }
code, pre { font-family: var(--font-mono); }

3. Dùng chúng trong Tailwind. Các font stack đó trở thành các utility font-display, font-sans và font-mono.

/* app.css, Tailwind CSS v4 */
@theme {
  --font-display: "Inter Display", "Inter", system-ui, sans-serif;
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;
}

Họ font chỉ là một nửa của hệ thống kiểu chữ. Cỡ chữ, chiều cao dòng và khoảng cách chữ của từng cấp nằm trong phần typography của một tệp DESIGN.md, thứ mà agent lập trình AI của bạn có thể áp dụng trên mọi màn hình.

FAQ

Câu hỏi về công cụ tìm font chữ

Giải đáp ngắn gọn về Công cụ tìm font chữ website miễn phí.

Công cụ mở trang trong một trình duyệt thật và đọc font được tính toán của mọi đoạn chữ hiển thị: họ font mà trình duyệt thực sự hiển thị, cùng độ đậm và cỡ chữ. Sau đó các họ font được nhóm lại và xếp hạng theo lượng chữ mà mỗi họ font hiển thị.

Không. Font là phần mềm có bản quyền, và giấy phép của một trang web thường chỉ áp dụng cho chính trang đó. Nếu họ font có trên Google Fonts, bạn có thể tải miễn phí ở đó; nếu không, hãy tìm xưởng font và mua giấy phép cho mục đích sử dụng của bạn.

Công cụ đọc đúng một trang bạn nhập và liệt kê tối đa tám họ font. Công cụ chỉ thấy chữ mà trang đó hiển thị cho người truy cập lần đầu: chữ nằm sau trang đăng nhập, các trang chặn trình duyệt tự động, và chữ được vẽ dưới dạng hình ảnh hoặc SVG sẽ không được đọc, nên font của chúng không xuất hiện.

Có. Mọi web font mà trang hiển thị đều được phát hiện, dù đến từ Google Fonts, Adobe Fonts hay máy chủ riêng của trang web. Font của Google được xem trước bằng đúng mặt chữ thật; các font khác hiển thị bằng font dự phòng.

Có, mỗi lần một phần tử. Trong Chrome hoặc Edge, nhấp chuột phải vào đoạn chữ, chọn Inspect và cuộn tab Computed xuống Rendered Fonts, nơi ghi tên font thực sự được vẽ. Trong Firefox, bảng Fonts trong Inspector liệt kê font của phần tử đang chọn và mọi font mà trang đã tải.

Công cụ này chỉ liệt kê font. Một tệp DESIGN.md từ Design Extractor bao gồm màu sắc, toàn bộ thang kiểu chữ, khoảng cách và quy tắc component của một trang web, trong một tệp mà agent lập trình AI của bạn có thể làm theo.

Thêm công cụ miễn phí

Xem tất cả công cụ miễn phí

Bạn cần cả hệ thống thiết kế?

Lấy DESIGN.md với màu sắc, thang kiểu chữ, khoảng cách và component của bất kỳ trang web nào, sẵn sàng cho agent lập trình AI của bạn.

Lấy DESIGN.md