Làm thế nào để thêm Typography Awesome trong WordPress với Typekit

Bạn có bao giờ tự hỏi làm thế nào nhà thiết kế có thể sử dụng các phông chữ web tùy chỉnh đẹp trên các trang web của họ? Thường thì họ đang thêm các phông chữ tùy chỉnh vào WordPress sử dụng Typekit, một dịch vụ Adobe cung cấp cho bạn truy cập phông chữ chất lượng cao. Trong bài này, chúng tôi sẽ chỉ cho bạn cách thêm các phông chữ Typekit trong WordPress để cải thiện cách đánh máy của bạn.

Typekit Phông chữ trong WordPress

Tại sao lại sử dụng Phông chữ Typekit?

Typekit là dịch vụ phông chữ dựa trên đăng ký phổ biến có thể giúp bạn tiết kiệm rất nhiều tiền. Thay vì trả tiền cho các giấy phép phông chữ cá nhân, có thể có được khá tốn kém, bạn có thể truy cập toàn bộ thư viện của hàng trăm phông miễn phí hoặc cho một tỷ lệ căn hộ hàng năm.

Thư viện Typekit là một bộ sưu tập lớn gồm hơn 1.000 phông chữ. Một số phông chữ đẹp nhất mà bạn có thể tìm thấy trên web có sẵn thông qua Typekit, một dịch vụ Adobe.

Kế hoạch miễn phí cơ bản của họ đi kèm với truy cập vào 230 phông chữ +, và bạn có thể sử dụng 2 gia đình font trên một trang web miễn phí. Các kế hoạch khác bắt đầu từ $ 49,99 đến $ 99,99 mỗi năm.

Những phông chữ Typekit tuyệt vời có thể dễ dàng thêm vào bất kỳ trang web nào mà không làm chậm tốc độ tải trang của bạn. Phông chữ được phục vụ từ CDN của Adobe và tải ở tốc độ nhanh hơn nhiều nếu bạn lưu trữ chúng trên trang web của riêng bạn.

Typekit cho WordPress Video Hướng dẫn

Tại sao lại sử dụng Phông chữ Tùy chỉnh trên WordPress?

Typography đóng một vai trò quan trọng trong việc thiết kế trang web của bạn.

Chọn đúng phông chữ rõ ràng sẽ truyền đạt cá tính và thông điệp của bạn đến độc giả của bạn. Cho dù bạn muốn miêu tả loại hình nào – chuyên nghiệp, thân thiện, giản dị, giàu kinh nghiệm – các phông chữ trên trang web của bạn có thể giúp dự án đúng hình ảnh.

Bằng cách sử dụng đúng phông chữ, bạn có thể để lại ấn tượng lâu dài. Thay vì trông giống như mọi trang web khác trên web, văn bản của bạn trông khác biệt đáng chú ý. Lựa chọn phông chữ thích hợp cho trang web WordPress của bạn có thể làm cho trang web của bạn đi từ một thiết kế đơn giản đến một tác phẩm nghệ thuật và làm đẹp thẩm mỹ.

Phông chữ tuỳ chỉnh web có thể:

  • tăng tỷ lệ chuyển đổi
  • giảm tỷ lệ thoát của trang web của bạn
  • tăng thời gian dành cho trang web của bạn
  • tạo ra một trải nghiệm đáng nhớ cho người dùng

Sẵn sàng để bắt đầu với phông chữ Typekit? Dưới đây là cách sử dụng Typekit để tuỳ chỉnh thiết kế WordPress của bạn.

Làm thế nào để bắt đầu với typekit

Đầu tiên, bạn cần phải tạo một tài khoản Typekit. Để làm điều này, chỉ cần ghé thăm Typekit.com để so sánh các kế hoạch có sẵn.

Bạn sẽ cần phải chọn kế hoạch bạn muốn đăng ký. Kế hoạch miễn phí giới hạn bạn tới một trang web và bao gồm quyền truy cập phông chữ giới hạn. Bạn có thể muốn bắt đầu với kế hoạch miễn phí để thử nó, và sau đó nâng cấp sau này. Nâng cấp sẽ mang lại cho bạn một thư viện lớn hơn của phông chữ, và bạn có thể sử dụng chúng trên các trang web khác.

Các kế hoạch đăng ký Typekit

Bước tiếp theo là tạo một bộ. Bộ công cụ này cho phép bạn đặt một thư viện các phông chữ và cài đặt cụ thể cho trang web của bạn, do đó Typekit chỉ tải các tệp và mã cần thiết. Để tạo bộ của bạn, hãy thêm tên trang web và tên miền của bạn và sau đó nhấp vào Tiếp tục .

Tạo bộ công cụ cho trang web của bạn

Sau khi bạn hoàn thành việc điền thông tin cho bộ kit của mình, Typekit sẽ cung cấp cho bạn một chút mã JavaScript để thêm vào trang web của bạn. Bạn có thể sao chép và dán mã này vào trình soạn thảo văn bản như Notepad để lưu nó ngay bây giờ. Chúng tôi sẽ thêm nó vào trang web của bạn trong bước tiếp theo của hướng dẫn này.

Bây giờ, bạn có thể bắt đầu chọn phông chữ của bạn. Bạn có thể duyệt qua thư viện phông chữ và lọc theo các tùy chọn như phân loại, trọng lượng, chiều rộng, x chiều cao, và hơn thế nữa.

Chọn phông chữ từ thư viện Typekit

Khi bạn thấy một phông chữ bạn thích, bạn có thể nhấp vào nó để biết thêm chi tiết và ví dụ. Nếu bạn muốn thêm nó vào bộ web kit của bạn, hãy nhấp vào Sử dụng Web: Thêm vào Bộ công cụ nút bên phải.

thêm phông chữ typekit vào bộ web của bạn

Thao tác này sẽ hiển thị cửa sổ bật lên nơi bạn cần thêm phông chữ bạn đã chọn vào bộ kit bạn vừa tạo.

thêm phông chữ web tùy chỉnh của bạn vào bộ kit

Bây giờ bạn có thể nhấp Công bố để lưu các thay đổi cho bộ kit của bạn.

xuất bản kit của bạn để lưu các thay đổi của bạn

Đó là tất cả! Bộ phông chữ của bạn đã sẵn sàng để sử dụng.

Thêm các kiểu chữ Typekit của bạn trong WordPress

Cách dễ nhất để thêm phông chữ tuỳ chỉnh web mới vào blog WordPress của bạn là sử dụng plugin WordPress Typekit.

Chúng tôi khuyên bạn nên sử dụng Phông chữ Typekit cho WordPress. Sau khi cài đặt và kích hoạt plugin, bạn có thể ghé thăm Cài đặt »Kiểu chữ Typekit để cấu hình plugin.

sử dụng plugin typekit wordpress để tùy chỉnh phông chữ

Đầu tiên, bạn cần dán đoạn mã JavaScript mà bạn đã lưu trước đó vào trường Mã typekit embed. Sau đó, bạn có thể thêm bộ chọn CSS để chỉ định nơi bạn muốn sử dụng phông chữ trên trang web của bạn.

Trong ảnh chụp màn hình ở trên, chúng tôi đã thêm phông chữ vào h1.site-title Bộ chọn CSS.

Chủ đề WordPress của bạn có thể sử dụng các lớp học khác nhau cho các phần tử khác nhau. Bạn sẽ cần phải sử dụng công cụ Inspect Element trong trình duyệt web của bạn để tìm ra những lớp CSS đó. Bạn cũng có thể muốn kiểm tra WordPress của chúng tôi tạo ra cheat CSS cho người mới bắt đầu để giúp bạn bắt đầu.

Sử dụng công cụ Inspect Element trong Google Chrome để tìm các lớp CSS