Thêm font chữ vào và tái sử dụng bộ mã icons theme flatsome

Nội dung

    Flatsome mặc định sử dụng font chữ của Google Font, nghĩa là mỗi lần người dùng truy cập vào website của bạn, font sẽ được tải tự động từ Google Font. Nếu số người dùng vào website của bạn ít thì điều này không có ảnh hưởng gì. Nhưng lượng người dùng lớn cùng truy cập vào website và tự động load font từ Google Font, sẽ gây quá tải cho hosting/vps/server của bạn.

    Hơn thế nữa, việc tải font từ Google Font làm website của bạn chạy chậm hơn, đặc biệt là những lúc đứt cáp quang biển, thì website của bạn còn chậm hơn nữa.

    Điều này làm cho khách hàng của bạn khi vào website có trải nghiệm không tốt, và sẽ không bao giờ quay lại website của bạn nữa.

    Vì thế, chúng ta phải giải quyết vấn đề tự động load font từ Google Font, bằng cách up font chữ lên hosting/vps/server của bạn. Nếu hosting của bạn sử dụng ổ cứng SSD thì việc load font còn nhanh hơn nữa.

    Sau khi đã hiểu rõ vấn đề, chúng ta cùng bắt đầu nhé!

    Bước 1: Tắt tính năng sử dụng Google Font trong theme flatsome
    Bạn vào Giao diện -> Tùy biến -> Style -> Typography

    Tại đây, bạn tìm các ô Font Family và Variant và chỉnh lại giá trị như ảnh dưới

    Font Family : Sans Serif

    Variant : Normal 400

    tìm và thay toàn bộ nhé các bạn

    Lưu bản nháp tự động

     

    Sau đó, các bạn bấm Đăng để lưu lại.

    Vẫn tại giao diện đó, bạn tiếp tục tick vào ô “Disable Google Fonts. No fonts will be loaded from Google.” Và bấm Đăng để lưu lại.

    Thêm font chữ vào theme flatsome

    Bước 2: Thêm font chữ mới vào hosting

    Ở đây, mình có 2 font chữ : utm-avo và utm-avo-bold

    Thêm font chữ vào theme flatsome

    mình sẽ up nguyên thư mục (folder) font lên hosting, theo đường dẫn:

    wpfast.vn/wp-content/themes/wpfast/assets/font/utm-avo.ttf

    wpfast.vn/wp-content/themes/wpfast/assets/font/utm-avo-bold.ttf

    wpfast là folder theme đang được sử dụng (đang kích hoạt)
    Thêm font chữ vào theme flatsome

    font được up vào folder assets của theme đang được kích hoạtSau khi up font lên hosting thành công, bạn hãy kiểm tra lại đường dẫn tới font đã chính xác chưa, trước khi tiếp tục bước tiếp theo.

    Bước 3: Thay đổi font chữ mặc định của theme flatsome bằng font chữ mới

    Để áp dụng font chữ mới thay thế font mặc định flatsome, tại thanh admin menu bar – bạn vào đường dẫn sau: Flatsome -> Advanced -> Custom CSS

    Thêm font chữ vào theme flatsome

    Tại ô Custom CSS (ALL SCREENS)

    Thêm font chữ vào theme flatsome

    Bạn past đoạn mã sau vào ô ALL SCREENS

    @font-face{font-family:”utm-avo”;
    font-weight:normal;
    font-style:normal;
    src:url(“/wp-content/themes/wpfast/assets/font/utm-avo.ttf”) format(“truetype”);
    font-display:swap
    }
    @font-face{font-family:”utm-avo-bold”;
    font-weight:normal;
    font-style:normal;
    src:url(“/wp-content/themes/wpfast/assets/font/utm-avo-bold.ttf”) format(“truetype”);
    font-display:swap
    }
    .nav>li>a,
    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
    font-family:’utm-avo’,
    sans-serif
    }
    p,
    a,
    span,
    strong,
    button,
    li {
    font-family:’utm-avo’,
    sans-serif
    }

    Thêm font chữ vào theme flatsome

    Và bấm Save All Changes để lưu lại nhé!

    LƯU Ý : ở dòng

    src:url(“/wp-content/themes/wpfast/assets/font/utm-avo.ttf”) format(“truetype”);

    Các bạn cần thay thế bằng đường dẫn tới file font đã up lên ở bước 2 nhé!
    Vậy là chúng ta đã hoàn tất việc thay font cho theme flatsome rồi. Bây giờ bạn quay lại trang chủ, nhấn f5 để xem thành quả nhé!

    (Có 1 số trường hợp vẫn không thấy font mới được áp dụng, bạn hãy chắc chắn rằng đường dẫn tới file font mới hoàn toàn chính xác, hoặc xóa cache trình duyệt nhé!)

    Chỉ với 3 bước đơn giản, bạn đã có thể thay đổi font chữ cho theme flatsome mà không cần phải dùng plugin. Việc này giúp website của bạn có tốc độ tải trang nhanh hơn, ít tốn tài nguyên hệ thống hơn, trang admin ít plugin sẽ nhẹ nhàng hơn.

    Sử dụng bộ icon mặc định của Flatsome

    các icon được tích hợp sẵn trong theme Flatsome, bạn có thể sử dụng ngay mà không cần cài đặt thêm bộ icons từ bên thứ 3. Mặc dù có đôi chút hạn chế, tuy nhiên, mình tin là bộ Flatsome icons này sẽ thỏa mãn tốt nhu cầu khi bạn đang không cần quá nhiều icon

    Để hiển thị bộ icon của Flatsome, các bạn có thể sử dụng thẻ i hoặc thẻ span trong html với class của icon để hiển thị icon mà bạn muốn.

    <i class="icon-chat"> icon chat</i>
    <span class="icon-chat" style="font-family:fl-icons;"> icon chat</span>

    Đây là kết quả hiển thị:  icon chat icon chat

    Bộ mã Flatsome icons được tích hợp sẵn trong theme

    icon-lock
    icon-line

    icon-chat
    icon-user
    icon-shopping-cart
    icon-tumblr
    icon-gift
    icon-phone
    icon-play
    icon-menu
    icon-shopping-basket

    icon-shopping-bag
    icon-google-plus
    icon-heart-o
    icon-heart
    icon-500px
    icon-vk
    icon-angle-left
    icon-angle-right
    icon-angle-up
    icon-angle-down
    icon-twitter

    icon-envelop
    icon-tag
    icon-star
    icon-star-o
    icon-facebook
    icon-feed
    icon-checkmark
    icon-plus
    icon-instagram
    icon-pinterest
    icon-search

    icon-skype
    icon-dribbble
    icon-certificate
    icon-expand
    icon-linkedin
    icon-map-pin-fill
    icon-pen-alt-fill
    icon-youtube
    icon-flickr
    icon-clock
    icon-snapchat

    Để lại một bình luận

    Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *