Chuyển đổi hình ảnh

Phông chữ miễn phí - Trang web hàng đầu, bản xem trước trực tiếp và cách sử dụng chúng

Duyệt qua các nguồn đáng tin cậy để tìm phông chữ miễn phí, kiểm tra bản xem trước trực tiếp, sao chép CSS rõ ràng và tìm hiểu cách sử dụng phông chữ web phù hợp. Bao gồm các bộ sưu tập mã nguồn mở, miễn phí cho mục đích thương mại và sử dụng cá nhân.

Phông chữ của Google

OFL

Thư viện nguồn mở lớn nhất với CDN toàn cầu nhanh, các tập hợp con và phông chữ có thể thay đổi. Lý tưởng cho web và ứng dụng. Hầu hết các gia đình đều sử dụng Giấy phép Phông chữ Mở SIL.

Phông chữ webBiếnThương mại được*
Thăm nom

Chia sẻ phông chữ (bởi ITF)

Miễn phí

Những kiểu chữ chất lượng được cung cấp miễn phí bởi Indian Type Foundry. Nhóm sạch, nhúng CDN dễ dàng và nhiều tùy chọn thay đổi.

Phông chữ webBiến
Thăm nom

Sóc phông chữ

Thương mại miễn phí

Thư mục được tuyển chọn tập trung vào các phông chữ sử dụng miễn phí cho mục đích thương mại. Bao gồm một trình tạo webfont để tự lưu trữ.

Thương mại được*Máy phát điện
Thăm nom

Liên minh của loại di chuyển

OFL

Xưởng đúc mã nguồn mở cổ điển với các dòng sản phẩm vượt thời gian như League Spartan và Raleway. Tuyệt vời cho việc xây dựng thương hiệu và biên tập.

Nguồn mởXây dựng thương hiệu
Thăm nom

Velvetyne

OFL

Các kiểu chữ nguồn mở thử nghiệm với các kiểu hiển thị đặc biệt. Hoàn hảo cho áp phích, văn hóa và công việc sáng tạo.

Trưng bàythực nghiệm
Thăm nom

tập thể

OFL

Cộng đồng phát hành phông chữ miễn phí chất lượng cao theo giấy phép mở. Tùy chọn biên tập và hiển thị mạnh mẽ.

Nguồn mởbiên tập
Thăm nom

mở xưởng đúc

OFL

Chỉ mục phông chữ nguồn mở được tuyển chọn với các công cụ kiểm tra và bản trình bày lấy thiết kế làm trung tâm. Lý tưởng để khám phá những gia đình mới.

Thăm nom

1001 phông chữ

Giấy phép hỗn hợp

Thư mục lớn với các bộ lọc để sử dụng miễn phí cho mục đích thương mại. Đọc giấy phép cho mỗi gia đình; nhiều thứ chỉ dành cho mục đích sử dụng cá nhân.

Thăm nom

DaFont

Sử dụng cá nhân

Kho lưu trữ khổng lồ tốt nhất cho các dự án cá nhân và nguồn cảm hứng. Giấy phép rất khác nhau; kiểm tra từng trang tải xuống.

Thăm nom

Phông chữ biểu tượng (Phông chữ tuyệt vời, Biểu tượng vật liệu, Biểu tượng phối lại)

Bậc miễn phí

Đối với các biểu tượng giao diện người dùng sử dụng đường dẫn phông chữ. Hãy xem xét các hệ thống biểu tượng SVG hiện đại, nhưng phông chữ biểu tượng vẫn hữu ích để thêm nhanh.

giao diện người dùngCDN
Phông chữ tuyệt vời Biểu tượng vật liệu Biểu tượng phối lại

Xem trước trực tiếp và đoạn CSS

Chỉ địa phương - không có gì được tải lên
The quick brown fox jumps over the lazy dog. 0123456789
họ phông chữ: Inter, sans-serif; trọng lượng phông chữ: 600;

So sánh tính năng (Ảnh chụp nhanh)

Giấy phép khác nhau tùy theo gia đình
Địa điểm Nguồn mở Thương mại miễn phí Phông chữ biến đổi CDN/Webfont Ghi chú
Phông chữ của GoogleĐúngĐúng*ĐúngĐúngThư viện lớn nhất, CDN nhanh
Chia sẻ phông chữHỗn hợpĐúngNhiềuĐúngGia đình hiện đại
Sóc phông chữHỗn hợpĐúng*Một sốMáy phát điệnĐược quản lý để sử dụng thương mại
Liên minh loại có thể di chuyểnĐúngĐúngMột sốTự lưu trữKinh điển vượt thời gian
VelvetyneĐúngĐúngMột sốTự lưu trữHiển thị thử nghiệm
DaFontKHÔNGKhác nhauMột vàiKHÔNGTuyệt vời cho các dự án cá nhân

Cách sử dụng phông chữ miễn phí trên web

  1. Kiểm tra giấy phép: OFL và các giấy phép cho phép khác là tốt nhất cho các dự án thương mại. Một số trang web liệt kê các phông chữ chỉ dành cho cá nhân.
  2. Chọn phân phối: Liên kết CDN để có tốc độ hoặc tự lưu trữ với @mặt phông chữ để kiểm soát và bảo mật.
  3. Tải trước các phông chữ quan trọng cho văn bản chính của bạn nếu CLS là vấn đề đáng lo ngại; xác định ngăn xếp dự phòng để tránh nhấp nháy.
  4. Ưu tiên các phông chữ có thể thay đổi khi có sẵn để giảm yêu cầu và có trọng lượng linh hoạt.

Ví dụ về CDN

<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap" rel="stylesheet">
<style>
  body{ font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif; }
</style>

Ví dụ về tự lưu trữ

@font-face{
  font-family: "MyFont";
  src: url("/fonts/MyFont-Variable.woff2") format("woff2");
  font-display: swap;
}
body{ font-family: "MyFont", system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif; }

* Luôn xác minh giấy phép của từng nhóm trên trang nguồn.

Câu hỏi thường gặp

Google Fonts có miễn phí cho mục đích thương mại không?

Hầu hết được phát hành dưới dạng OFL và miễn phí cho mục đích thương mại. Xác nhận giấy phép trên mỗi trang gia đình.

Tôi nên sử dụng phông chữ biểu tượng hay biểu tượng SVG?

Biểu tượng SVG linh hoạt hơn cho các ứng dụng hiện đại. Phông chữ biểu tượng vẫn hữu ích cho việc thiết lập nhanh hoặc quy trình kế thừa.

Phông chữ web có ảnh hưởng đến tốc độ trang web không?

Đúng. Sử dụng hiển thị phông chữ: trao đổi, tập hợp con nếu có thể và giới hạn họ và trọng số.

Phông chữ có mục đích chung tốt nhất là gì?

Inter, Roboto và Source Sans 3 rất linh hoạt. Kết hợp với serif như Merriweather hoặc Playfair cho tiêu đề.