Quản lý giao diện – Thiết lập kiểu chữ tùy chỉnh trên Website

  • Saturday 05/03/2022

Trong quá trình lướt web, ta sẽ gặp một số website có font chữ đẹp, từ đó sẽ phát sinh nhu cầu muốn website mình có font chữ đó. Bài viết này sẽ hướng dẫn Người quản trị website dễ dàng thêm font tùy thích cho giao diện.

Lưu ý: Web30s hiện chỉ hỗ trợ sử dụng các font chữ từ Google Fonts cung cấp. Các loại font chữ tùy chỉnh sẽ chưa hỗ trợ.

Bước 1: Chọn kiểu chữ tùy chỉnh

Người quản trị website truy cập trang https://fonts.google.com/ để chọn cho mình một bộ font yêu thích.

kiểu chữ tùy chỉnh

  • Ô Search fonts: nhập tên font mình muốn tìm vào ô tìm kiếm trên trang web.
  • Ô Sentence: sử dụng để nhập thêm mẫu nội dung bằng tiếng Việt để xem mẫu font.

* Cần chú ý là font có hỗ trợ ngôn ngữ tiếng Việt (unicode/utf-8) để tránh lỗi font chữ trên website đang vận hành.

Sau khi điển thông tin thì bên dưới ta sẽ có các font gợi ý (nếu không nhập tên font), nội dung hiển thị theo từng loại font mà ta tìm kiếm. Để chọn font sẽ sử dụng, ta nhấp chuột chọn vào ô có font phù hợp, ví dụ ta chọn font Smooch Sans.

kiểu chữ tùy chỉnh

Website chuyển ta đến màn hình kiểu font Smooch Sans, ta sẽ chọn độ đậm nhạt của nét chữ, ví dụ ta chọn độ đậm là 400 (Regular 400) thì ta nhấn vào nút Select this style.

kiểu chữ tùy chỉnh

Sau đó, ta sẽ mở được thanh thông tin bên cạnh trang. Nhà quản trị tìm dòng “Use on the web” và chọn vào “import”. Ta sẽ có 2 nhóm thông tin sau đây để lấy cấu hình về cài đặt cho Web30s:

——————

<style>
@import url(‘https://fonts.googleapis.com/css2?family=Smooch+Sans&display=swap‘);
</style>

——————

font-family: ‘Smooch Sans’, sans-serif;

——————

Bước 2: Cài đặt kiểu chữ tùy chỉnh từ Google

Nhà quản trị truy cập trang quản trị website >> Quản lý giao diện >> Thiết lập giao diện. Thanh tác vụ bên góc trái trên, Nhà quản trị nhấn vào nút Thiết lập mặc định (nút thứ 2) >> Kiểu chữ tùy chỉnh.

Ta tiến hành nhập:

  • Ô đường dẫn: nhập nguyên vẹn dòng URL font đã có ở bước 1. Ví dụ ở đây là URL của font Smooch Sans là https://fonts.googleapis.com/css2?family=Smooch+Sans&display=swap
  • Tên kiểu chữ: nhập từ khóa font bao gồm dấu nhay đơn (nếu có) từ font family. Ví dụ ở đây là: ‘Smooch Sans’, sans-serif

kiểu chữ tùy chỉnh

Điền xong 2 thông tin, ta nhấn nút Lưu dữ liệu để cài font vào website. Hoặc nếu có nhiều font hơn thì nhấn nút Thêm mới để tạo danh sách font mong muốn.

kiểu chữ tùy chỉnh

Cài đặt font mới xong cho website, Nhà quản trị nhấn vào nút Thiết lập mặc định phía trên menu Kiểu chữ tùy chỉnh >> Kiểu chữ, trong danh sách này ta kéo lên trên cùng sẽ có font đã cài hoặc tìm tên font ta đã cài, ví dụ ở đây là font Smooch Sans.

Sau cùng, ta nhấn nút Lưu dữ liệu của phần menu Thiết lập website lại để website có tác dụng font chữ mới. Phần font chữ mới chọn sẽ có tác dụng lên các widget có phần kiểu chữ được chọn là Mặc định. Trong trường hợp các widget đang sử dụng kiểu chữ riêng, nếu nhà quản trị muốn thay đổi thì sẽ chọn lại kiểu mặc định; hoặc trên menu Thiếp lập mặc định, cạnh nút Lưu dữ liệu có nút Thiết lập mặc định, ta bấm vào nút mũi tên cạnh nút sẽ là tính năng Khôi phục tất cả font của widget, tính năng này sẽ giúp các widget chạy lại kiểu Mặc định của font chữ. Từ đó sẽ áp đặt được font mới chọn, tuy nhiên thao tác này sẽ buộc Quý khách tùy chỉnh lại tất cả định dạng in đậm, nghiêng, cỡ chữ đã cài đặt trên các widget nên Quý khách cũng chú ý trước khi sử dụng nó.

Sau khi tùy chỉnh hoàn tất, Quý khách chú ý nhấn nút Lưu dữ liệu, nút Lưu trang để giữ lại các cài đặt đã tùy chỉnh.

Như vậy ta đã kết thúc bài hướng dẫn thêm kiểu chữ tùy chỉnh vào web30s ở đây.

Tham khảo:

Hướng dẫn sử dụng phiên bản website 4.0

Bạn có thể tìm hiểu thêm cho mình nhiều chương trình khuyến mãi của P.A Việt Nam tại đây.

P.A Việt Nam – Web30s

Rate this post