Tải lên và sử dụng phông chữ tùy chỉnh trên trang web WordPress của bạn không khó như bạn nghĩ.
Có thể điều này có vẻ hơi phức tạp và đúng là nó liên quan một chút đến CSS – nhưng nếu bạn có thể sao chép (ctrl+c) và dán (ctrl+v) cũng như đọc tiêu đề menu, bạn sẽ ổn thôi – thực sự là dễ dàng như vậy.
Là như thế này…
Có vô số cửa hàng phông chữ miễn phí trên mạng – tất cả đều có danh sách vô tận các phông chữ kỳ quặc, lạ lùng, đơn giản, kỳ dị và thậm chí là vi phạm bản quyền. Định dạng của chúng đều giống nhau – chỉ cần một cú nhấp chuột – nhấp để tải xuống (vượt qua các quảng cáo để tìm nút tải xuống được giấu kín trong một số trường hợp) và nó sẽ xuất hiện trong thư mục tải xuống của bạn dưới dạng zip – mở nó ra và bạn sẽ thấy nó ở định dạng .ttf (Mac) hoặc .Woff (những người khác). Tuyệt vời! Bây giờ làm thế nào để bạn đưa nó lên trang web của mình?
Phông chữ được diễn giải khác nhau trên các trình duyệt khác nhau – nếu bạn sử dụng các phông chữ dựa trên Google, chúng sẽ hoạt động tốt trên những trình duyệt đó, nhưng nếu không có trên Safari của Apple – khi bạn đăng nhập vào trang web của mình trên Safari – thì cái mà bạn nghĩ là phông chữ menu phù hợp với logo của bạn có thể bị Safari thay thế bằng Arial vì đó là phông chữ gần nhất mà nó có. Có phải tôi đã làm bạn mất phương hướng? Tôi sẽ giải thích, định dạng mà bạn đã tải xuống phông chữ là chưa đủ. Bạn cần tạo ‘font-face’ – hoặc nói một cách đơn giản hơn – bạn cần chia nhỏ tệp mà bạn đã tải xuống thành một vài định dạng khác nhau – mỗi tệp phông chữ mới đã được định dạng sẽ được đọc bởi từng trình duyệt khác nhau khi truy cập vào trang của bạn, miễn là bạn đã tải lên các tệp đó vào trang WordPress của mình.
Điều này có thể phức tạp – vì phương pháp hiệu quả nhất để thực hiện điều này là tải lên các định dạng tệp phông chữ khác nhau trực tiếp vào thư mục gốc trên máy chủ trang web của bạn. Tuy nhiên, cách dễ nhất là tải xuống một plugin gọn gàng có tên là ‘Use Any Font’. Điều tuyệt vời nhất về plugin miễn phí này là khi bạn tải lên tệp – nó sẽ tự động tạo font face cho bạn và chia tệp thành các định dạng cần thiết tương ứng. Nghe thú vị phải không? Tôi nghĩ vậy.
Lưu ý…
Một điểm cần lưu ý với plugin miễn phí là nếu bạn muốn sử dụng nhiều phông chữ tùy chỉnh trên trang Wordpress của mình, bạn cần đóng góp ít nhất 10 đô la cho người tạo plugin – và tại sao không? Đây là một sản phẩm rất đầy đủ và được thiết kế đẹp. Nó cũng là một ví dụ khá hiệu quả về trải nghiệm người dùng (UX). Nếu tôi không nói với bạn về nhiều định dạng tệp cần thiết và những gì đang diễn ra, và bạn chỉ sử dụng plugin như một người mới bắt đầu – bạn sẽ chỉ cần tải lên tệp (mà bạn đã nhấp để tải xuống từ một cửa hàng phông chữ) – đặt tên cho nó – và gán nó cho tiêu đề và văn bản đoạn trên các trang web của bạn chỉ trong tích tắc – thậm chí việc kết nối plugin với giấy phép người dùng của bạn cũng hoàn toàn theo bản năng.
Một điểm khác với plugin miễn phí là các định dạng tệp phông chữ tồn tại trên máy chủ ‘Use Any Font’. Đây là cách mà họ tạo ra font face.
Vì vậy, đó là tất cả những gì bạn cần làm thực sự – nhưng để hiệu quả hơn – bây giờ mà bốn định dạng tệp đã có trên trang web của bạn và nếu bạn muốn tất cả các phông chữ đều nằm trên trang của mình – bạn có thể vào phần CSS tùy chỉnh của trang Wordpress và dán vào đoạn mã sau.
Đoạn mã này cũng sẽ hoạt động để đọc các tệp từ máy chủ ‘Use Any Font’ – nhưng nếu bạn tạo một tài khoản tại các trang miễn phí và trả phí khác nhau – thực sự chọn bất kỳ trang nào có phông chữ của bạn – có sự khác biệt đáng ngạc nhiên trong lựa chọn từ cửa hàng này sang cửa hàng khác, bạn có thể sử dụng vị trí web này để cho các máy chủ biết nơi tìm các tệp phông chữ đã định dạng.
@font-face {
font-family: “FontName”;
src: url(“http://yoursite.com/fonts/fontname.eot”);
src: url(“http://yoursite.com/fonts/fontname.eot?#iefix”) format(“embedded-opentype”),
url(“http://yoursite.com/fonts/fontname.woff”) format(“woff”),
url(“http://yoursite.com/fonts/fontname.ttf”) format(“truetype”),
url(“http://yoursite.com/fonts/fontname.svg#fontname”) format(“svg”);
}Để sử dụng nó trên trang của bạn từ ‘Use Any Font’ trong các mẫu chủ đề khác, hãy thay thế URL ở trên bằng tên mà bạn đã đặt cho phông chữ khi tải lên ‘Use Any Font’.
Nếu bạn muốn làm điều này một cách hiệu quả và đúng cách – hãy sử dụng một định dạng tệp mà bạn đã tải xuống và tìm đến một công cụ tạo phông chữ (tìm kiếm trên Google), công cụ này sẽ cung cấp cho bạn tất cả các định dạng tệp cần thiết trong thư mục tải xuống của bạn. Đăng nhập vào máy chủ của bạn (qua Filezilla hoặc bất kỳ công cụ nào bạn sử dụng) và tải thư mục chứa tất cả các định dạng tệp vào thư mục gốc – sau đó chèn mã ở trên, với tên phông chữ từ thư mục trong vị trí gốc vào CSS tùy chỉnh của bạn.
Hãy chờ đón một bài viết sắp tới về CSS và cách sử dụng nó. Hy vọng nó sẽ giúp ích cho những phần trong bài viết này có thể còn mơ hồ với bạn. Ngoài ra, một tìm kiếm nhanh trên Google sẽ giúp bạn tìm thấy những gì bạn cần dưới dạng video hoặc văn bản – tôi có thể dễ dàng tháo gỡ một bộ phận (bằng cách xem video trên YouTube) và bán nó cho một tay buôn lén lút trên internet ngày nay – chưa kể đến việc học những điều cơ bản về CSS (Cascading Style Sheets).
Hy vọng điều này hữu ích – nếu bạn có bất kỳ câu hỏi nào hoặc muốn thêm trợ giúp để sử dụng phông chữ trên trang của mình – hãy cho tôi biết – tôi sẵn lòng giúp đỡ.
