Khi bạn sử dụng một theme nào đó, dù thiết kế đẹp đến đâu nhưng font chữ trong Website lộn xộn, to nhỏ khác nhau thì website của bạn sẽ không được đánh giá cao. HOSTVN sẽ chia sẻ cách thêm phông chữ Google vào trang web WordPress của bạn.
Làm cách nào để thêm phông chữ Google vào trang web WordPress của bạn?
Trang web của bạn có sử dụng đúng phông chữ không?
Ngày nay, khi số lượng người sử dụng Internet ngày càng tăng, việc tìm kiếm phông chữ phù hợp đã trở thành một vấn đề lớn đối với các nhà thiết kế trang web, nhà xuất bản và nhà bán lẻ. BBC và The Guardian gần đây đã tung ra một phông chữ riêng được thiết kế để dễ đọc hơn trên điện thoại và tiết kiệm chi phí cho các doanh nghiệp về việc cấp phép cho các phông chữ thương mại.
Phông chữ nào tốt nhất cho WordPress của bạn?
Ngày nay, có hàng ngàn phông chữ mã nguồn mở mà bất kỳ ai cũng có thể tải xuống và sử dụng, và hàng ngàn phông chữ có sẵn để mua.
Nếu bạn muốn một phông chữ giúp trang web của bạn dễ sử dụng hơn và nhanh hơn, với Phông chữ Google, thư viện phông chữ mã nguồn mở dễ đọc trên màn hình nhỏ và bộ nhớ đệm nhanh giúp tăng tốc thời gian tải trang là một gợi ý hay. Ở đây, Google Fonts chỉ cung cấp 848 họ phông chữ, 823 trong số đó hoạt động cho bản sao tiếng Anh.
Để thu hẹp lựa chọn của bạn xuống hơn 800 điểm, bạn cần áp dụng một số nguyên tắc chọn phông chữ cơ bản, giống như những nguyên tắc được mô tả bởi Janie Kliever tại Canva.
Hai đến ba phông chữ là con số lý tưởng cho hầu hết các trang web
Nếu bạn chỉ sử dụng một phông chữ, trang web của bạn có thể trông không hấp dẫn và khách truy cập có thể gặp khó khăn trong việc tìm hiểu tiêu đề là gì. Trong trường hợp bạn sử dụng nhiều hơn hai hoặc ba phông chữ có thể làm cho trang web trông rất lộn xộn và thiếu chuyên nghiệp.
Chọn phông chữ có độ tương phản để tạo hệ thống phân cấp trực quan
Ví dụ: bạn có thể sử dụng phông chữ đậm hoặc serif cho tiêu đề của mình để làm cho chúng nổi bật và một phông chữ sans serif đơn giản cho nội dung của bạn, dễ dàng nhận ra ngay cả trên điện thoại thông minh.
Google Design cung cấp vô số kiểu và phông chữ cũng như cách tìm phông chữ tốt nhất cho WordPress của bạn trong Chọn Phông chữ Web: Hướng dẫn cho Người mới bắt đầu. Trong số những điều tác giả nói rằng bạn nên cân nhắc là:
- Bạn đang thiết kế trang web của mình cho dài hạn hay ngắn hạn? Các dự án dài hạn thường cần họ phông chữ với nhiều kiểu tùy chọn.
- Khối văn bản của bạn sẽ dài bao lâu? Ngay cả trên màn hình, phông chữ serif cũng là một ý tưởng hay nếu bạn có từ năm đoạn văn trở lên cùng một lúc.
- Bạn sử dụng kích thước nào? Phông chữ trơn dễ đọc hơn ở kích thước nhỏ, nhưng chúng có thể không đủ nổi bật trong tiêu đề.
- Khách truy cập của bạn có dịch trang web của bạn sang các ngôn ngữ khác không? Nếu vậy, bạn sẽ cần chọn một họ phông chữ hỗ trợ các ký tự phổ biến để các bản dịch đó hiển thị chính xác.
Tìm kiếm Phông chữ Google phù hợp cho trang web của bạn
Khi bạn đã sẵn sàng khám phá Google Fonts, có thể hơi khó khăn khi điều hướng thư mục khó hiểu để tìm ra kiểu chữ phù hợp. Ví dụ: bạn đang tìm kiếm một phông chữ serif để sử dụng cho tiêu đề trên trang web doanh nghiệp:
- Trong thanh bộ lọc tìm kiếm của Google Fonts, bạn có thể chọn danh mục serif và chọn kết quả bạn muốn như theo độ tuổi, mức độ phổ biến hoặc theo thứ tự bảng chữ cái theo tên.
- Theo ngôn ngữ, bạn có thể thu hẹp kết quả của mình xuống các kiểu chữ hỗ trợ tiếng Anh bằng cách chọn ‘Latinh’
- Tiếp theo, bạn có thể chọn các hộp để mở menu trượt và điều chỉnh các tùy chọn cho một số kiểu (các biến thể trên phông chữ, như đậm hơn hoặc nghiêng), độ dày, chữ nghiêng và chiều rộng.
Bằng cách chọn ‘serif’ và ‘Latin’, bạn sẽ có 174 tùy chọn cho phông chữ tiêu đề trang web của mình. Để xem bản sao của bạn trông như thế nào, bạn có thể thay thế bản sao giả bằng văn bản của riêng bạn. (Bạn cũng có thể nhấp vào ‘áp dụng cho tất cả các phông chữ’ để chúng tôi không phải nhập lại chúng)
Bạn có thể sử dụng thanh trượt để thay đổi kích thước văn bản từ 8 đến 112 điểm. Hoặc bạn cũng có thể sử dụng menu thả xuống ở bên trái để xem bản sao của bạn trông như thế nào trong một câu hoặc đoạn văn hoặc bảng chữ cái và số trong phông chữ đó.
Nhấp vào nút + thêm Bree Serif vào khay ở dưới cùng, nơi bạn có thể thu thập tất cả các phông chữ bạn muốn sử dụng. Khi bạn đã sẵn sàng cài đặt chúng, hãy nhấp vào thanh khay màu đen và bạn sẽ thấy mã HTML và CSS để nhúng phông chữ vào trang web của bạn. Bạn có thể tải xuống bao nhiêu phông chữ tùy thích, nhưng Google khuyên bạn không nên tải xuống mọi thứ “đề phòng” vì tốn nhiều thời gian và không gian.
Làm thế nào để sử dụng Google Fonts trên trang web của bạn?
Nếu bạn cảm thấy thoải mái khi thêm mã vào trang web của mình, bạn có thể sử dụng hướng dẫn Bắt đầu với Google Fonts API để sử dụng bảng định kiểu để chỉ định họ phông chữ và kiểu bạn muốn trên trang web của mình. Bạn cũng sẽ học cách giảm kích thước tệp phông chữ cho tiêu đề và biểu thức bằng cách tối ưu hóa các yêu cầu phông chữ.
Đối với bất kỳ ai không thoải mái khi chỉnh sửa mã trang web của riêng họ, có một số plugin dành cho WordPress có thể cài đặt và quản lý Google Fonts cho bạn. Một trong những lựa chọn phổ biến nhất, với hơn 300.000 lượt cài đặt, là Phông chữ dễ dàng của Google. Với plugin này, bạn có thể tránh chỉnh sửa mã cho chủ đề trang web của mình và bạn sẽ nhận được menu Google Fonts mà không cần phải chọn và tải xuống bất kỳ loại nào trong số chúng theo cách thủ công.
Plugin này thêm menu kiểu chữ trong phần Tùy chỉnh WordPress của bảng điều khiển, nơi bạn có thể chọn họ phông chữ, kiểu, màu sắc và các yếu tố văn bản khác cho từng loại tiêu đề và văn bản trong chủ đề trang web của mình. .
Bạn có thể xem trước các thay đổi của mình sẽ như thế nào; Khách truy cập vào trang web của bạn sẽ chỉ thấy các thay đổi của bạn nếu bạn lưu và xuất bản chúng. Để thay đổi các thành phần văn bản, Google Fonts dễ dàng cho phép bạn tạo phông chữ tùy chỉnh của riêng mình sẽ hiển thị trong menu Kiểu chữ. Sau khi bạn chọn Phông chữ Google mà bạn muốn sử dụng và đảm bảo rằng chúng trông phù hợp khi xem trước, bạn đã sẵn sàng lưu và xuất bản để cập nhật trang web của mình.
Bằng cách cập nhật phông chữ của trang web, bạn không chỉ tạo cho nó một giao diện đẹp mà còn đang xây dựng trải nghiệm người dùng tốt hơn. Phông chữ tải nhanh hơn được thiết kế để dễ đọc trên màn hình là chìa khóa để thu hút khách truy cập quay lại, đặc biệt là khi nhiều người đang duyệt trên điện thoại của họ. Chúc may mắn!
XEM THÊM:
Top 6 plugin trò chuyện trực tiếp TỐT NHẤT cho WordPress 2018
Cách xác định danh tiếng và tính khả dụng của một plugin WordPress
