Bạn đã bao giờ tự hỏi các nhà thiết kế trang trí trang web với những bộ font vừa đẹp vừa lạ bằng cách nào chưa? Thông thường, họ đang sử dụng một bộ custom font được nhúng vào WordPress bằng Typekit, một dịch vụ của Adobe cho bạn quyền truy cập vào kho font chữ chất lượng cao. Trong bài viết này, chúng tôi sẽ trình bày cách để bạn có thể thêm font từ Typekit vào WordPress để làm đẹp thêm cho các typography của mình.
Tại sao nên sử dụng font chữ Typekit?
Typekit là một dịch vụ font chữ phổ biến có thể giúp bạn tiết kiệm rất nhiều tiền bởi nó trả tiền định kỳ. Thay vì trả tiền giấy phép cho từng font chữ riêng lẻ, bạn có thể truy cập và sử dụng thư viện của Typekit với hàng trăm font chữ miễn phí hoặc với mức phí cố định hàng năm.
Typekit là một bộ sưu tập font cực lớn với hơn 1.000 font chữ. Một số font chữ đẹp nhất mà bạn thấy trên web được cung cấp trên Typekit, một dịch vụ của Adobe.
Gói miễn phí cơ bản của họ cung cấp quyền truy cập vào hơn 230 font chữ và bạn có thể sử dụng miễn phí 2 họ font chữ trên cùng một trang web. Các gói dịch vụ khác có mức giá từ 49.99 đến 99.99 USD mỗi năm.
Những font chữ Typekit tuyệt vời này có thể dễ dàng được 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. Các font chữ được lưu trữ và tải về từ CDN của Adobe với tốc độ nhanh hơn nhiều so với việc bạn lưu chúng trên trang web của riêng bạn.
Typekit cho WordPress Video
Nếu bạn không thích video hoặc cần thêm hướng dẫn, thì bạn có thể tiếp tục đọc tiếp hướng dẫn bên dưới.
Tại sao nên sử dụng custom web font trên WordPress?
Typography đóng một vai trò rất quan trọng trong thiết kế trang web của bạn.
Chọn font chữ phù hợp sẽ truyền đạt rõ ràng tính cách và thông điệp của bạn đến độc giả. Bất kể loại hình ảnh nào bạn muốn thể hiện mình đến người đọc – chuyên nghiệp, thân thiện, giản dị, kinh nghiệm – các font chữ trên trang web của bạn có thể góp thêm phần vào việc phản ánh hình ảnh đó.
Bằng cách sử dụng bộ font chữ phù hợp, 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, nội dung của bạn trông khác biệt rõ rệt. Chọn font chữ phù hợp cho trang WordPress có thể làm cho trang web của bạn đi từ một thiết kế đơn giản thành một tác phẩm nghệ thuật đẹp mắt và tuyệt đẹp.
Các custom web font có thể:
- Tăng tỷ lệ chuyển đổi
- Giảm tỷ lệ thoát trang web của bạn
- Tăng thời gian dành cho trang web của bạn
- Tạo trải nghiệm đáng nhớ cho người dùng
Sẵn sàng để bắt đầu với font chữ Typekit? Dưới đây là cách sử dụng Typekit để trang trí cho thiết kế WordPress của bạn.
Hướng dẫn làm Typography đẹp mắt trên WordPress với Typekit
Cách bắt đầu với Typekit
Trước tiên, bạn sẽ cần tạo một tài khoản Typekit. Để làm điều này, chỉ cần truy cập Typekit.com để xem chi tiết về các gói dịch vụ mà họ cung cấp.
Bạn sẽ cần chọn gói trước khi đăng ký sử dụng. Gói miễn phí có giới hạn chỉ được sử dụng font trong một trang web và chỉ được truy cập vào bộ hơn 130 font miễn phí. Tất nhiên, bạn có thể bắt đầu dùng thử với gói miễn phí. Nếu thích, bạn có thể nâng cấp lên sau này. Các gói nâng cao cung cấp cho bạn một thư viện font chữ lớn hơn và bạn có thể sử dụng chúng trên nhiều trang web hơn.
Bước tiếp theo là tạo ra một bộ kit. Bộ kit cho phép bạn tập hợp một thư viện font chữ và bộ thiết lập cụ thể cho trang web của mình. Sau đó, Typekit sẽ chỉ tải các file font và mã nguồn cần thiết. Để tạo một bộ kit, hãy điền tên trang web và tên miền của bạn vào ô tương ứng và sau đó nhấp vào Continue.
Sau khi bạn điền xong thông tin cho bộ kit của bạn, Typekit sẽ cung cấp cho bạn một đoạn mã JavaScript để thêm vào website. 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 lại sau này dùng. Chúng ta sẽ tiến hành thêm nó vào website trong bước tiếp theo.
Ở bước này, bạn đã có thể chọn font chữ. Bạn có thể truy cập thư viện font chữ và lọc theo các tùy chọn như phân loại font, độ đậm của font (font weight), chiều rộng, x-height, v.v.
Khi bạn thấy một font chữ mình thích, bạn có thể nhấp vào nó để biết thêm chi tiết và xem ví dụ. Nếu bạn muốn thêm nó vào web kit của mình, hãy nhấp vào nút Web Use: Add to Kit ở bên phải.
Thao tác này sẽ hiển thị một cửa sổ pop-up, ở đây, bạn cần thêm font chữ đã chọn vào bộ kit vừa tạo.
Bây giờ hãy nhấp vào nút Publish để lưu các thay đổi.
Trên đây là các bước để! Bộ font chữ của bạn đã sẵn sàng để sử dụng.
Thêm font chữ Typekit của bạn vào WordPress
Cách dễ nhất để thêm một bộ custom web font mới vào blog WordPress của bạn là sử dụng plugin WordPress Typekit.
Chúng tôi khuyên dùng plugin Typekit Fonts for WordPress . Sau khi cài đặt và kích hoạt plugin, bạn có thể truy cập Settings » Typekit Fonts để thiết lập cho plugin.
Trước tiên, bạn sẽ cần dán mã JavaScript mà bạn đã lưu lại ở phần trước trong trường Typekit embed code. Sau đó, bạn có thể thêm CSS selector để chỉ định các thành phần bạn muốn sử dụng font đó trên trang web của mình.
Trong ảnh chụp màn hình ở trên, chúng tôi đã sử dụng font chữ cho các thành phần phù hợp với CSS selector h1.site-title
Theme WordPress của bạn có thể sử dụng các class khác nhau cho các thành phần khác nhau. Để tìm hiểu các class CSS đó, bạn cần sử dụng công cụ Inspect Element trong trình duyệt web của mình. Bạn cũng có thể tham khảo bài viết “bảng các CSS cheatsheet mặc định của WordPress” của chúng tôi dành cho người mới bắt đầu.
Chúng tôi hy vọng bài viết này đã giúp bạn học được cách thêm các typography đẹp mắt vào WordPress với Typekit. Bạn cũng có thể tham khảo thêm hướng dẫn của chúng tôi về cách thêm Google web font vào các theme WordPress.
Nếu thích bài viết này, bạn vui lòng đăng ký Kênh YouTube của chúng tôi để xem video hướng dẫn. Bạn cũng có thể tìm thấy chúng tôi trên Twitter và Facebook.