• Home
  • WordPress
    • Thủ thuật WordPress
    • WordPress plugins
    • WordPress themes
    • Hosting và domain
  • Kiếm tiền
    • Google AdSense
    • Tiếp thị liên kết
    • Rút gọn link
  • Quà tặng
  • Khuyến mãi
  • Đánh giá
  • Dịch vụ
    • WordPress Hosting
    • Cài đặt WordPress
    • Quét mã độc website
    • Tối ưu WordPress
    • Mua theme Paradise
  • Thông báo
  • Liên hệ

WP Căn bản

Thủ thuật WordPress và kiếm tiền online

wordpress-theme-tot-nhat

Trang chủ » WordPress » Thủ thuật WordPress » Lưu trữ Google Fonts ngay trên host để tăng tốc độ load

Lưu trữ Google Fonts ngay trên host để tăng tốc độ load

02/03/2018 18/08/2018 Trung Hiếu 37 Bình luận

Mục lục bài viết

  1. Lưu trữ Google Fonts ngay trên host của bạn

Hướng dẫn lưu trữ Google Fonts ngay trên host để tăng tốc độ load website WordPress.

huong-dan-luu-tru-google-fonts-tren-host-cho-wordpress

Trong bài viết lần trước, tôi đã hướng dẫn cách bạn cách để loại bỏ hoặc tải không đồng bộ Google Fonts nhằm tăng tốc độ load web rồi phải không nào? Mặc dù việc tải không đồng bộ (async) có thể giúp khắc phục lỗi chặn hiển thị trên Google PageSpeed Insights. Tuy nhiên, trên thực tế, nó vẫn được tải từ ngoài host và ảnh hưởng không nhỏ đến tốc độ load tổng thể của site do font không được cache và nén, đặc biệt là khi host của bạn đặt ở trong nước còn server Google đặt ở nước ngoài.

Tham khảo thêm:

  • Khắc phục lỗi cache của Google Analytics một cách đơn giản
  • Khắc phục lỗi Google Fonts trong Google PageSpeed Insights

Nếu bạn vẫn kiên quyết “không chịu từ bỏ” Google Fonts thì ngay sau đây là giải pháp tốt nhất giúp bạn thỏa mãn tâm nguyện. Chúng ta sẽ lưu trữ Google Fonts ngay trên host của bạn để tiện cho việc cache, nén cũng như tránh việc bị ảnh hưởng khi có sự cố… đứt cáp quang.

Lưu trữ Google Fonts ngay trên host của bạn

Xem mã nguồn blog/ website của bạn hoặc sử dụng các công cụ kiểm tra tốc độ load như Google PageSpeed Insights, bạn sẽ nhanh chóng tìm ra Google Fonts được dùng trên web.

<link rel='stylesheet' id='shopy-custom-fonts-css' href='//fonts.googleapis.com/css?family=Nunito%3Aregular%2C700%2C300%7CKameron%3Aregular%2C700%26subset%3Dlatin%2C' type='text/css' media='all' />

view raw
style.css
hosted with ❤ by GitHub

Trong ví dụ ở trên, web của tôi sử dụng font Nunito và font Kameron với các style regular, 300 và 700 với charset latin (nhìn vào cấu trúc link hoặc truy cập trực tiếp vào link font để xem thông tin). Ngay sau đây là hướng dẫn dể lưu trữ font Nunito trên host. Đối với các Google Fonts khác, các bạn cũng có thể làm theo cách hoàn toàn tương tự.

1. Đầu tiên, truy cập vào website Google Webfonts Helper. Nhập từ khóa tìm kiếm ở trên khung bên trái giao diện. Click vào kết quả tìm kiếm mà bạn mong muốn.

tim-kiem-google-fonts-muon-dung

2. Trong mục Select charsets, hãy tick vào loại charset mà bạn muốn sử dụng:

select-charsets

3. Trong mục Select styles, hãy tick vào các style mà bạn muốn sử dụng. Ví dụ ở đây tôi chọn 300, 700 và regular.

select-styles

4. Trong mục Copy CSS, hãy copy toàn bộ nội dung được cung cấp. Có 2 tùy chọn khác nhau:

copy-css-google-fonts

  • Best Support: là code hỗ trợ tất cả các trình duyệt, kể cả mới lẫn cũ. Các bạn nạn nên chọn loại code này.
  • Modern Browsers: là code chỉ hỗ trợ các trình duyệt mới.

Các bạn cũng có thể tùy biến tên thư mục lưu trữ fonts bằng cách chỉnh sửa nội dung trong mục Customize folder prefix. Nếu không, hãy giữ nguyên như mặc định.

5. Download files chứa mã nguồn font về máy tính của bạn.

download-file-google-fonts

6. Sử dụng File Manager của cPanel/ DirectAdmin hoặc phần mềm FTP để truy cập vào thư mục cài đặt WordPress, tạo 1 thư mục có tên là fonts, nằm ngang hàng với các thư mục như wp-content, wp-admin… Upload và giải nén file Google Fonts vừa download ở bước 5 vào trong đó.

upload-google-fonts

7. Paste đoạn code CSS mà bạn đã copy ở bước 4 vào trong Appearance => Customize => Additional CSS hoặc sử dụng tính năng Custom CSS (nếu theme của bạn có hỗ trợ).

additional-css-google-fonts

8. Sử dụng plugin Disable Google Fonts hoặc tính năng Remove Google Fonts (nằm trong tab Tuning) của plugin LiteSpeed Cache để loại bỏ code Google Fonts cũ.

remove-google-fonts-bang-plugin-litespeed-cache

Nếu bạn đang sử dụng plugin Autoptimize thì có một tính năng tương tự nằm trong Settings => Autoptimize => Extra => Google Fonts => Remove Google Fonts.

Xóa cache trình duyệt, cache web (nếu bạn có cài đặt plugin tạo cache) và kiểm tra thành quả. Thật đơn giản phải không nào? Chúc các bạn thành công!

Bạn có đang sử dụng Google Fonts trên blog/ website WordPress của mình không? Bạn đã làm cách nào để tối ưu chúng? Đừng quên chia sẻ với chúng tôi những kinh nghiệm và thủ thuật của bạn trong khung bình luận bên dưới.

Nếu bạn thích bài viết này, hãy subscribe blog của tôi để thường xuyên cập nhật những bài viết hay nhất, mới nhất qua email nhé. Cảm ơn rất nhiều. :)

4.5 / 5 ( 16 bình chọn )
  • Share on Facebook
  • Tweet on Twitter

Bài viết liên quan

Chuyên mục: Thủ thuật WordPress Thẻ: Tăng tốc WordPress

dich-vu-cai-dat-website-wordpress-mien-phi

Nói về Trung Hiếu

Một người con của xứ Nghệ, hiện đang sinh sống tại Hà Nội. Theo dõi tôi trên Facebook để cập nhật những tin tức mới nhất liên quan đến WordPress nhé.

Bài viết trước « Hướng dẫn thêm nhãn cho sản phẩm trong WooCommerce
Bài viết sau Hướng dẫn tạo Zalo Official Account một cách nhanh chóng »

Reader Interactions

Bình luận

    Trả lời Hủy

    Lưu ý:
    > Không sử dụng từ khóa trong mục "Tên".
    > Hãy sử dụng tên thật và địa chỉ email chính xác.
    > Vui lòng bình luận bằng tiếng Việt có dấu.
    Mọi bình luận trái quy định sẽ bị gỡ bỏ link hoặc xóa bỏ hoàn toàn.

  1. Sơn Gia viết

    09/09/2018 lúc 01:28

    Hay quá. Web bị điểm thấp toàn do mấy cái linh tinh từ bên thứ 3, trong đó có cả font google, có cách này ngon rồi.

    Trả lời
  2. Thang ngo Nguyen viết

    15/09/2018 lúc 16:58

    Mình do bằng Gtmatrix mà thấy làm cách nè lại kém hơn về chỉ số Fully Loaded time, Total page size, thời gian load font cũng tăng từ 247ms lên 258ms

    Trả lời
    • Trung Hiếu viết

      15/09/2018 lúc 18:09

      Điều đó chỉ chứng tỏ được một điều là tốc độ load file Google Fonts từ host của bạn đến server của GTmetrix chậm hơn load từ server của Google. Nó không đồng nghĩa với việc tốc độ load web trên trình duyệt của người dùng cũng chậm hơn. :P

      Trả lời
  3. Dat Nguyen viết

    24/12/2018 lúc 20:39

    cái plugin disable google font phải để đó luôn không đc xóa hả a

    Trả lời
    • Trung Hiếu viết

      25/12/2018 lúc 07:32

      Đúng rồi bạn. Nó chỉ có tác dụng khi còn plugin thôi.

      Trả lời
  4. Nguyễn Tùng viết

    07/08/2019 lúc 15:06

    Dạ chào bác Hiếu, cho tên Tung cho em hỏi tí, Em có sài 2 font vậy cũng vẫn làm như cách Anh chia sẻ ở trên phải không ạ ?, nếu sài host ở Việt Nam thì dùng cách này se tăng tốc độ tải wed tốt hơn phải không ạ ? cám ơn bác nhiều, chúc bác và gia đình sức khỏe – an lành nhé

    Trả lời
    • Trung Hiếu viết

      07/08/2019 lúc 15:38

      Đúng rồi bạn. :)

      Trả lời
  5. Quang viết

    21/09/2019 lúc 02:39

    Chào bạn
    CHo mình hỏi , mình đã làm như bạn và tốc độ tải trang tăng lên đáng kể . Tuy nhiên check thì thấy báo lỗi này :
    Failed to load resource: the server responded with a status of 404 (Not Found) roboto-condensed-v17-latin-regular.woff2:1
    Mình check trên host thì có file roboto-condensed-v17-latin-regular.woff2 ở trong thư mục fonts

    Trả lời
    • Trung Hiếu viết

      21/09/2019 lúc 07:41

      Bạn check lại xem cái link kia là link internal hay external?

      Trả lời
      • Quang viết

        21/09/2019 lúc 09:51

        File đường dẫn trên host của em bác ah. https://abc.com/vi/wp-content/themes/fonts/roboto-condensed-v17-latin-regular.woff2
        Em thấy trên host cũng có file này mà không hiểu sao nó vẫn báo lỗi.

        Trả lời
        • Trung Hiếu viết

          21/09/2019 lúc 10:50

          Bạn tìm và sửa link kia thành link subdomain là được mà. Sửa thành https://sub.abc.com/themes/… là được.

          Trả lời
          • quang viết

            21/09/2019 lúc 16:38

            Chào bác
            Mình chưa hiểu ý bác lắm vì mình ko có dùng subdomain trên VPS ah

  6. Phu Qui viết

    19/11/2019 lúc 10:58

    Bạn ơi cho mình hỏi. Sao khi mình làm cái này thì kiểm tra lại web thì nó không ra kết quả mà chỉ hiển thị dấu chấm hỏi (?). và bị lỗi 3 điểm: hình ảnh có ý nghĩa đầu tiền, thời điểm tương tác và CPU nhàn rỗi đầu tiền.
    Thêm nữa là trong phần : Đảm bảo văn bản vẫn hiển thị trong khi tải phông chữ web. Sau khi cài fonts xong thì nó có thêm các đường link fonts từ host vừa cài với chỉ số là 2.540 ms . trong khi trước đó mình dùng fonts google thì chỉ số chỉ có 30 20 hoặc 10 thôi. Mà bây giờ nó tồn tại luôn cả 2 thứ đó luôn. Cảm ơn!!

    Trả lời
  7. Dung Thủy viết

    23/11/2020 lúc 17:48

    Bài viết khá bổ ích

    Trả lời
  8. Long viết

    23/02/2021 lúc 16:08

    Mình thấy giờ cũng có 1 số themes có sẵn tính năng này trong themes option luôn đó AD

    Trả lời
« 1 2

Sidebar chính

NHẬN BÀI VIẾT QUA EMAIL

Hãy đăng ký ngay để là người đầu tiên nhận được thông báo qua email mỗi khi chúng tôi có bài viết mới!

Đừng quên truy cập vào email của bạn để xác nhận việc đăng ký nhé!

Theo dõi qua mạng xã hội

Dịch vụ WordPress Hosting

dich-vu-wordpress-hosting-gia-re-tot-nhat

Bạn đang tìm gì?

  • WordPress căn bản
  • Bảo mật WordPress
  • Tăng tốc WordPress
  • Sửa lỗi WordPress
  • Thủ thuật Genesis
  • Thủ thuật SEO

Dịch vụ tối ưu WordPress miễn phí

dich-vu-toi-uu-website-wordpress-chat-luong-cao

Bài viết mới nhất

  • Hướng dẫn sử dụng LiteSpeed Memcached 17/01/2021
  • Hướng dẫn nén ảnh bằng plugin LiteSpeed Cache 08/01/2021
  • Hướng dẫn nâng cấp PHP 8 cho website WordPress 15/12/2020
  • Sửa lỗi không hiện hình ảnh và mô tả khi share link lên Zalo 11/11/2020
  • Hiển thị mô tả cho category và tag trong WordPress 05/11/2020
  • Cải tiến công cụ tìm kiếm mặc định của WordPress 31/10/2020

Dịch vụ quét mã độc miễn phí

quet-ma-doc-mien-phi-cho-website

Footer

Bình luận mới nhất

  • Long trong Lưu trữ Google Fonts ngay trên host để tăng tốc độ load
  • Trung Hiếu trong Hướng dẫn sử dụng LiteSpeed Memcached
  • luc trong Bật mí về các công nghệ mà WP Căn bản đang sử dụng
  • Trung Hiếu trong Hướng dẫn nén ảnh bằng plugin LiteSpeed Cache

Bình luận nhiều nhất (tháng)

  1. Doligo (4)
  2. Tuyến (4)
  3. luc (3)
  4. Minh Khanh (3)
  5. gruu (2)
  6. Luật sư Online (2)

Thông tin hữu ích

  • Quy định sử dụng
  • Chính sách bảo mật
  • Bản quyền nội dung

Thống kê WP Căn bản

10 Chuyên mục - 978 Bài viết - 37294 Bình luận
positivessl-trust-seal

Bản quyền © 2014 - 2020 · WP Căn bản · Sử dụng Paradise child theme và dịch vụ WordPress Hosting