Cách thêm font chữ Google vào website WordPress

Khi bạn sử dụng một theme nào đó dù cho nó có được thiết kế đẹp đến đâu mà Font chữ trong Website lộn xộn, chỗ to chỗ nhỏ thì trang web của bạn cũng không được đánh giá cao. HOSTVN sẽ chia sẻ cách thêm font chữ Google vào website WordPress của bạn.

Làm thế nào để thêm font chữ Google vào website WordPress của bạn?

Website của bạn có sử dụng font chữ phù hợp không?

Hiện nay, khi mà lượng người dùng Internet ngày càng tăng, việc tìm đúng font chữ đã trở thành một vấn đề lớn cho các nhà thiết kế website, nhà xuất bản và nhà bán lẻ. BBC và The Guardian mới đây đã ra mắt font chữ bespoke được thiết kế dễ đọc hơn trên điện thoại và tiết kiệm chi phí cho doanh nghiệp trên giấy phép cho các font chữ thương mại.

Font chữ nào là tốt nhất cho WordPress của bạn?

Hiện nay, có hàng ngàn font chữ nguồn mở mà bất kỳ ai cũng có thể dowload sử dụng và hàng nghìn font chữ sẵn có để mua.

Nếu bạn muốn có font chữ giúp website của mình dễ sử dụng và nhanh hơn, với Google Fonts, một kho phông chữ nguồn mở dễ đọc trên màn hình nhỏ và bộ nhớ cache nhanh giúp tăng tốc thời gian tải trang là một gợi ý không tồi. Tại đây, Google Fonts chỉ cung cấp 848 họ font chữ, 823 trong số đó làm việc cho bản sao tiếng Anh.

Để thu hẹp các lựa chọn hơn 800 điểm, bạn cần áp dụng một số nguyên tắc lựa chọn font chữ cơ bản, như các nguyên tắc được mô tả bởi Janie Kliever tại Canva.

Hai đến ba font chữ là số lý tưởng cho hầu hết các webisite

Nếu bạn chỉ sử dụng một font chữ, trang web của bạn có thể trông có vẻ sẽ không hấp dẫn và khách truy cập có thể gặp khó khăn trong việc tìm ra đâu là tiêu đề. Còn trong trường hợp bạn sử dụng nhiều hơn hai hoặc ba font chữ có thể làm cho website trông rất rối mắt và không chuyên nghiệp.

Chọn font chữ có độ tương phản để tạo ra một hệ thống phân cấp trực quan

Ví dụ: bạn có thể sử dụng font chữ đậm hoặc serif cho tiêu đề của mình để chúng nổi bật và font chữ sans serif đơn giản cho phần nội dung để có thể dễ dàng nhận thấy khi lướt qua, ngay cả trên smartphone.

Google Design cung cấp phong phú hơn cả về kiểu chữ, font chữ và cách tìm font chữ tốt nhất cho WordPress của bạn trong Choosing Web Fonts: A Beginner’s Guide. Trong số những điều tác giả nói bạn nên cân nhắc là:

• Bạn đang thiết kế trang web của mình trong dài hạn hay ngắn hạn? Các dự án dài hạn thường cần họ font 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 nhiêu? Ngay cả trên màn hình, font chữ serif là một ý tưởng tốt nếu bạn sẽ có năm hoặc nhiều đoạn văn cùng một lúc.
• Bạn sử dụng kích cỡ bao nhiêu? Font chữ đơn giả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ọ font chữ hỗ trợ các ký tự phổ biến để các bản dịch đó hiển thị chính xác nhất.

Tìm kiếm Google Fonts phù hợp với website của bạn

Khi bạn đã sẵn sàng khám phá Google Fonts, bạn có thể gặp chút thách thức để điều hướng thư mục clunky để tìm đúng kiểu chữ. Ví dụ bạn tìm kiếm một font chữ serif để sử dụng cho tiêu đề trên một website của 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 các  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 thành các kiểu chữ hỗ trợ tiếng Anh bằng cách chọn ‘Latin’
• Tiếp theo, bạn có thể kiểm tra các hộp để mở các menu trượt và chỉnh các tùy chọn cho một số kiểu (các biến thể trên font chữ, như đậm hơn hoặc nghiêng), độ dày, nghiêng và chiều rộng.

Bằng cách chọn ‘serif’ và ‘Latin’, bạn nhận được 174 tùy chọn cho font 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 mình. (Bạn cũng có thể nhấp vào ‘apply to all fonts’ để chúng tôi không phải nhập lại)

Bạn có thể sử dụng thanh trượt để thay đổi kích thước văn bản ở bất kỳ đâu từ 8 đến 112 điểm. Hoặc 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à chữ số trong font 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 font 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 website của mình. Bạn có thể tải xuống 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ứ “just in case” vì thời gian và không gian cần thiết.

Làm thế nào để sử dụng Google Fonts trên trang web của bạn?

Nếu bạn thấy thoải mái khi thêm code vào trang web của mình, bạn có thể sử dụng Get Started with Google Fonts API guide để sử dụng bảng định kiểu để chỉ định họ font chữ và kiểu bạn muốn trên trang web của mình. Bạn cũng sẽ tìm hiểu cách giảm kích thước tệp font chữ cho tiêu đề và biểu hiện bằng cách tối ưu hóa các yêu cầu font chữ.

Đối với bất kỳ ai không thoải mái chỉnh sửa code website của riêng họ, có một số plugin cho WordPress có thể cài đặt và quản lý Google Fonts cho bạn. Một trong những tùy chọn phổ biến nhất, với hơn 300.000 cài đặt, là Google Font dễ dàng. Với plugin này, bạn có thể tránh chỉnh sửa code cho chủ đề của trang web và bạn nhận được một trình đơn của Google Fonts mà không phải chọn và tải xuống thủ công bất kỳ mã nào trong số chúng.

Plugin này thêm một menu kiểu chữ trong phần WordPress Customize section of the dashboard, nơi bạn có thể chọn họ font chữ, kiểu, màu 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 bạn.

Bạn có thể xem bản xem trước những thay đổi mà bạn thực hiện sẽ trông 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 yếu tố văn bản, Google Fonts dễ dàng cho phép bạn tạo các tùy chỉnh font chữ của riêng bạn sẽ hiển thị trong menu Typography. Sau khi bạn chọn Google Fonts bạn muốn sử dụng và đảm bảo chúng chuẩn ngay trong bản 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 font chữ của trang web, bạn không chỉ cung cấp cho nó giao diện đẹp mắt, bạn cũng đang xây dựng trải nghiệm người dùng tốt hơn. Font chữ tải nhanh hơn được thiết kế cho khả năng đọc trên màn hình là chìa khóa để giữ khách truy cập trở lại, đặc biệt khi có nhiều người thực hiện duyệt trên điện thoại của họ hơn. Chúc bạn thành công!

XEM THÊM:

Điểm mặt top 6 Plugin Live Chat dành cho WordPress TỐT NHẤT 2018

Làm sao để xác định được mức độ uy tín và khả dụng của WordPress Plugin