Cẩm nang sử dụng Typekit trong lập trình web

Rate this post

Typekit là gói dịch vụ cho phép bạn mua bản quyền thuê bao sử dụng các font từ thư viện của Adobe để sử dụng trong web và máy tính. Hướng dẫn toàn tập sử dụng Typekit sẽ giúp bạn sử dụng dịch vụ này trên website của mình.

 Typekit là gì?

TypeKit cung cấp embed font bản quyền bằng Javascript hoặc CSS để bạn có thể nhúng vào web hoặc tải về máy tính, và sau đó trên website bạn chỉ cần gọi đúng tên thì font sẽ hiển thị đúng như mong muốn.

TypeKit đang được rất nhiều website lớn sử dụng, bao gồm cả WordPress, New York Times. Nó còn đặc biệt bởi với mỗi kiểu font, bạn tha hồ lựa chọn độ đậm nhạt (font-weight). Với hơn 700 nhà thiết kế font, có thể nói Typekit quá xứng đáng để bạn trải nghiệm và làm tăng cảm xúc cho người dùng của mình.

Hướng dẫn sử dụng Typekit

Trong bài viết này, chúng ta sẽ tìm hiểu lần lượt cách tạo TypeKit cho website của bạn và thay đổi/thêm mới tên miền cho mỗi Typekit. Để bắt đầu, bạn cần đăng ký một tài khoản và một gói dịch vụ (subscription) tại Typekit.com rồi nhé.

Tạo Typekit mới cho website của bạn

Sau khi bạn đăng nhập trên trình duyệt web, bạn có thể tạo mới một new Kit bằng menu Kits > Create new kit

 

Menu để tạo new Typekit
Menu để tạo new Typekit

Tiếp theo, một poup hiện ra và bạn cần nhập thông tin về tên website và các tên miền có thể sử dụng để hiển thị Typekit này.

Bước đầu trong tạo 1 Typekit mới

 

Thông thường ta sẽ có 2 website, một bản trên localhost phục vụ việc test và một bản online để cập nhật với khách hàng/người dùng về phiên bản mới nhất.

Sau khi bạn nhập phần này, một thông báo mới hiện ra thông báo bạn đã có thể add Typekit vào website bằng 1 đoạn Javascript hoặc import bằng CSS (style inline) hoặc Advanced.

Lưu ý mục Advanced là cách font sẽ load mượt hơn, bằng cách khi nào load được font thì mới hiển thị content trên website của bạn, tránh trường hợp. Nhưng đừng copy nhé vì cách sử dụng tốt nhất là kết hợp với Font Events như code mẫu Javascript dưới đây:

Để khi load web không bị giật (font tự đổi trên trình duyệt), ta nên viết thêm đoạn CSS sau:

Nếu trong giao diện WordPress đã có phần Typekit này rồi, hãy thử tìm cách thay ID của Typekit mới là xong. Một gợi ý thú vị là tạo 1 field text mới trong Theme Options (của Advanced Custom Fields) cho người quản trị web nhập ID là tốt nhất.

Lưu ý: Ta mới chỉ thêm Typekit mà chưa thêm bất kỳ font nào. Tiếp theo ta cần chọn font và gán cho Typekit ta vừa tạo.

Tham khảo thêm các Font Events để nếu bạn cần có thể thêm vào các hiệu ứng trên web nhé:

Chọn font và sử dụng với Typekit

Giờ, ta sẽ cần thêm font vào trong typekit tương ứng với website. Hãy lựa chọn một font trên web Typekit và bạn sẽ nhìn thấy nut “Add to kit” hiện ra ở góc trên bên phải như hình:

Sau khi click vào, bạn sẽ thấy phần lựa chọn Typekit xuất hiện. Tất nhiên, nếu bạn đã tạo Typekit ở bước trên rồi thì ta chỉ cần chọn “Add to an existing kit” và chọn tên website là được.

Thêm font vào Typekit

Giờ, một popup sẽ hiện ra và xác nhận font đã được thêm vào kit của website.

Cài đặt Typekit

Ở cột bên trái, bạn có thể chọn:

  1. Character Set: Kiểu ngôn ngữ, ví dụ như font có hỗ trợ tiếng Việt hay các ngôn ngữ như Nhật, Đức,.. hay không.
  2. Weights & Styles: Độ dày và kiểu định dạng font sẽ sử dụng với website. Đừng quá tham mà chọn hết, có thể làm giảm tốc độ load của web đấy.
  3. CSS Stack: Kiểu @font-face sẽ sử dụng, tốt nhất nên để nguyên.

Ở cột bên phải là danh sách font. Thường ta nên sử dụng thống nhất một font, nhưng nhiều khi cũng có thể sử dụng 2 font, trong đó 1 font Serif làm Heading và 1 font Sans-serif để làm Paragraph.

Ở phía trên, bạn có hai menu:

Embed Code: tương tự code nhúng vào web (Javascript hay CSS) ở bước tạo Typekit ở trên.

Kit Settings sẽ mở ra popup chứa hai mục:

  1. Thiết lập tên và tên miền liên quan tới Typekit tương tự bước đầu khi tạo Typekit mới ở phần trên.
  2. Colophon Settings: là 1 trang của Typekit chứa thông tin về font đang dùng cho website của bạn.

Giờ là bước quan trọng, các thay đổi bạn thiết lập (bao gồm cả public trang Colophon) sẽ chỉ được áp dụng nếu bạn click vào nút “Publish” ở phía dưới popup.

Kết luận

Typekit rất phù hợp với web designer, và hơn thế nữa, rất được sử dụng trong các thiết kế website nước ngoài có tính thẩm mỹ cao nhằm mang lại các kiểu thiết kế với typography cá tính và có UX tốt với người dùng.

Code Tốt hi vọng bài viết này sẽ hữu ích với những ai quan tâm và có ý định sử dụng font Typekit trên website của mình.

Viết một bình luận


Chuyên gia về Web
Bạn muốn làm việc với dịch vụ website do chúng tôi triển khai?
Gọi tư vấn 0982.90.4343
Chuyên gia về Web
Bài viết liên quan

02/01/2024

Fix lỗi npm không thể cài các package devDependencies
Khi cài đặt dự án,  có lúc bạn sẽ cài mãi cũng không đủ các package npm, đặc biệt là...
Gọi file PHP trong WordPress

19/09/2023

Cài đặt và sử dụng WP-CLI trên môi trường Linux
Trên một số môi trường Hosting có thể cung cấp SSH hoặc Terminal access, song không có sẵn WP-CLI để...
Import database MySQL lớn trên môi trường Docker

06/08/2023

Import database MySQL lớn trên môi trường Docker
Mình sử dụng EasyPanel để quản lý các Docker và build môi trường app. Nay gặp tình huống phải import...

28/01/2023

Hướng dẫn cài đặt php extension mongodb trên Mac OS M1
Khi bạn muốn hỗ trợ MongoDB trên dòng Mac M1, phần cài đặt sẽ cần một chút lưu ý. Hướng...