Ngoài việc trông đẹp mắt, phông chữ tùy chỉnh còn có thể giúp bạn cải thiện khả năng đọc, tạo hình ảnh thương hiệu và tăng thời gian người dùng dành cho trang web của bạn.
Trong bài viết này, mình sẽ hướng dẫn bạn cách thêm phông chữ tùy chỉnh trong WordPress bằng phương pháp Google Fonts, TypeKit và CSS3 @ Font-Face.
Phương pháp 1: Thêm phông chữ tùy chỉnh bằng plugin Easy Google Fonts
Nếu bạn muốn thêm và sử dụng Google Fonts trên trang web của mình thì phương pháp này cho đến nay là dễ nhất và được khuyến nghị cho người mới bắt đầu.
Điều đầu tiên bạn cần làm là cài đặt và kích hoạt plugin Easy Google Fonts . Sau khi kích hoạt, bạn có thể chuyển đến trang Giao diện »Tùy biến . Thao tác này sẽ mở giao diện tùy biến chủ đề trực tiếp, nơi bạn sẽ thấy phần Kiểu chữ mới.
Nhấp vào Kiểu chữ, bạn sẽ hiển thị các phần khác nhau trên trang web của mình, nơi bạn có thể áp dụng Phông chữ của Google. Chỉ cần nhấp vào ‘Chỉnh sửa Phông chữ’ bên dưới phần bạn muốn chỉnh sửa.
Trong phần phông chữ, bạn có thể chọn bất kỳ Phông chữ nào của Google mà bạn muốn sử dụng trên trang web của mình. Bạn cũng có thể chọn kiểu phông chữ, cỡ chữ, phần đệm, lề và hơn thế nữa.
Tuy nhiêntTùy thuộc vào chủ đề của bạn, một số tuỳ chọn phông chữ trên trang web lại không được kích hoạt và bạn có thể tham khảo cách fix.
Trước tiên, bạn cần truy cập trang Cài đặt »Phông chữ của Google
và cung cấp tên cho kiểm soát phông chữ của bạn. Tiếp theo, nhấp vào nút ‘Tạo điều khiển phông chữ’ và sau đó bạn sẽ được yêu cầu nhập các bộ chọn CSS.
Bạn có thể thêm các phần tử HTML mà bạn muốn nhắm mục tiêu (ví dụ: h1, h2, p, blockquote) hoặc sử dụng các lớp CSS.
Bây giờ hãy nhấp vào nút “Save font control” để lưu cài đặt của bạn. Bạn có thể tạo bao nhiêu bộ điều khiển phông chữ tùy ý cho các phần khác nhau của trang web.
Để sử dụng các bộ điều khiển phông chữ này, bạn cần đi tới Appearance »Customizer và nhấp vào tab Typography.
Đừng quên nhấp vào nút lưu hoặc xuất bản để lưu các thay đổi của bạn.
Phương pháp 2: Thêm Phông chữ Google trong WordPress theo cách thủ công
Phương pháp này yêu cầu bạn thêm mã vào các tệp chủ đề WordPress của mình.
Đầu tiên, hãy truy cập thư viện phông chữ của Google và chọn một phông chữ bạn muốn sử dụng. Tiếp theo, nhấp vào nút sử dụng nhanh bên dưới phông chữ.
Trên trang phông chữ, bạn sẽ thấy các kiểu có sẵn cho phông chữ đó. Chọn kiểu mà bạn muốn sử dụng trong dự án của mình và sau đó nhấp vào nút thanh bên ở trên cùng.
Tiếp theo, bạn sẽ cần chuyển sang tab ‘Nhúng’ trong thanh bên để sao chép mã nhúng..Đầu tiên, bạn có thể chỉ cần chỉnh sửa tệp header.php của chủ đề và dán mã trước <body>thẻ.
Sau khi kích hoạt, hãy đi tới Cài đặt »Insert Headers and Footers trang và dán mã nhúng vào hộp ‘Scripts in header’.
Bạn có thể sử dụng phông chữ này trong biểu định kiểu của chủ đề như sau:
|
1
2
3
|
.h1 site-title { font-family: 'Open Sans', Arial, sans-serif; } |
Tham khảo thêm dịch vụ hosting