• Trang chủ
  • WordPress
    • Thủ thuật WordPress
    • WordPress Plugins
    • WordPress Themes
  • Hosting và Domain
  • Kiếm tiền
  • Đánh giá
  • Khuyến mãi
  • Thông báo
  • Giới thiệu
  • Liên hệ

WP Căn bản

Kiến thức căn bản cho người dùng WordPress

paradise-child-theme-wordpress-theme-tot-nhat
  • Dịch vụ WordPress Hosting
  • Dịch vụ tối ưu WordPress
  • Dịch vụ quét mã độc WordPress
  • Mua Paradise child theme
Trang chủ » WordPress » Thủ thuật WordPress » Lưu trữ Google Fonts ngay trên host để tăng tốc độ load
hosting-tot-nhat-danh-cho-wordpress

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

Cập nhật: 22/06/2022 Trung Hiếu 48 Bình luận

Mục lục Hiện
  • 1. Xác định thông tin của Google Fonts
  • 2. Lưu trữ Google Fonts ngay trên host
    • 2.1. Lưu trữ Google Fonts bằng plugin
    • 2.2. Lưu trữ Google Fonts bằng phương pháp thủ công

Hướng dẫn lưu trữ Google Fonts ngay trên host để tăng tốc độ load cho 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.

Xác định thông tin của Google Fonts

Xem mã nguồn 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 hoặc GTmetrix, bạn sẽ nhanh chóng tìm ra Google Fonts được dùng trên web:

xem-link-google-fonts-trong-ma-nguon-website

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ự.

Lưu trữ Google Fonts ngay trên host

Có 2 cách khác nhau để làm điều này. Chúng tôi khuyên dùng plugin vì nó đơn giản và nhanh chóng hơn.

Lưu trữ Google Fonts bằng plugin

1. Tất cả những gì các bạn cần làm là cài đặt và kích hoạt một plugin có tên là Local Google Fonts (download).

cai-dat-va-kich-hoat-plugin-local-google-fonts

2. Sau đó, truy cập Settings => Google Fonts => click vào nút Host locally.

click-vao-nut-host-locally

3. Nếu thành công, các bạn sẽ nhận được Status là: loaded, served from your sever.

luu-tru-google-fonts-tren-host-thanh-cong

4. Sử dụng các công cụ như Google PageSpeed Insights, GTmetrix hoặc xem mã nguồn website để kiểm tra và xác nhận các vấn đề liên quan đến Google Fonts đã được xử lý:

google-fonts-da-duoc-luu-tru-tren-host

Lưu trữ Google Fonts bằng phương pháp thủ công

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 (download), Flying Fonts by WP Speed Matters (download) hoặc tính năng Remove Google Fonts (nằm trong tab LiteSpeed Cache => Page Optimization => [3] Optimization) 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.

go-bo-google-fonts-bang-plugin-autoptimize

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 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. :)

  • Chia sẻ lên Facebook
  • Chia sẻ lên Twitter
  • Chia sẻ lên LinkedIn

Bài viết liên quan

Ra mắt plugin APCu Object Cache độc quyền tại WP Căn bản
Ra mắt plugin APCu Object Cache độc quyền tại WP Căn bản
Tính năng Crawl Optimization của plugin Yoast SEO
Tính năng Crawl Optimization của plugin Yoast SEO
Vô hiệu hóa WooCommerce Brands để tăng tốc độ
Vô hiệu hóa WooCommerce Brands để tăng tốc độ

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

dich-vu-wordpress-hosting-chong-ddos-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. Tôi là người sáng lập và đứng sau mọi hoạt động của WP Căn bản. Tìm hiểu thêm về tôi tại đây.

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

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

    Tất cả các bình luận đều sẽ được kiểm duyệt nghiêm ngặt. Mọi bình luận trái quy định sử dụng sẽ bị gỡ bỏ link hoặc xóa bỏ hoàn toàn. Vui lòng đọc kỹ quy định trước khi bình luận. Xin cảm ơn!

  1. Sáng 64 bình luậnviết

    27/07/2021 lúc 11:40

    Hiện có 1 số plugin dùng font của họ. Có các nào chặn tải plugin tải font của họ bắt dùng font tùy chọn của mình không bác hiếu

    Bình luận
    • Trung Hiếu Quản lýviết

      27/07/2021 lúc 11:47

      Bạn có thể dùng các plugin có tính năng chặn load file CSS, JS, Fonts nhé. Ví dụ Asset CleanUp Pro, Perfmatters, Gonzales, CSS JS Manager…

      Bình luận
      • Sáng 64 bình luậnviết

        27/07/2021 lúc 15:29

        Vẫn không dc bác à, bị dính 2 link font mà k xóa gì dc

        Bình luận
        • Trung Hiếu Quản lýviết

          27/07/2021 lúc 16:28

          Bạn dùng cái gì xóa mà không được vậy?

          Bình luận
          • Sáng 64 bình luậnviết

            27/07/2021 lúc 16:50

            Disqus bác, nó lấy font của nó. Bác có thể hướng dẫn Giờ muốn lấy font của web thì chèn code gì nhỉ

          • Trung Hiếu Quản lýviết

            27/07/2021 lúc 17:11

            Nó load fonts từ server của nó chứ có load từ server của bạn đâu mà bạn đòi bỏ. :P

  2. Sáng 64 bình luậnviết

    22/07/2021 lúc 23:43

    sau khi cài đã nhận font riêng nhưng tại sao khi check nó vẫn có font cũ bác hiếu nhỉ
    Request URL: https://fonts.gstatic com/s/roboto/v18/KFOmCnqEu92Fr1Mu7WxKKTU1Kvnz.woff2

    Bình luận
    • Trung Hiếu Quản lýviết

      23/07/2021 lúc 06:45

      Vì bạn chưa loại bỏ fonts cũ chứ sao. :P Theo mình thì cứ bỏ luôn Google Fonts cho nó nhẹ.

      Bình luận
      • Tuấn Ca 15 bình luậnviết

        25/07/2021 lúc 14:01

        H check site T lần nữa xem còn GG fonts hông :)) bữa làm theo r đó: chammoc. com

        Bình luận
        • Trung Hiếu Quản lýviết

          25/07/2021 lúc 16:46

          Hết Google Fonts rồi. Nhưng Google Analytics thì vẫn còn. :P

          Bình luận
        • Trung Hiếu Quản lýviết

          25/07/2021 lúc 16:48

          P/s: Ngoài ra, sử dụng nhiều CSS và JS quá. Vote đổi sang dùng theme Paradise. :P

          Bình luận
  3. Long 1 bình luậnviế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

    Bình luận
  4. Dung Thủy 1 bình luậnviết

    23/11/2020 lúc 17:48

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

    Bình luận
  5. Phu Qui 1 bình luậnviế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!!

    Bình luận
  6. Quang 3 bình luậnviế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

    Bình luận
    • Trung Hiếu Quản lýviết

      21/09/2019 lúc 07:41

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

      Bình luận
      • Quang 3 bình luậnviế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.

        Bình luận
        • Trung Hiếu Quản lý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.

          Bình luận
          • quang 3 bình luậnviế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

  7. Nguyễn Tùng 1 bình luậnviế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é

    Bình luận
    • Trung Hiếu Quản lýviết

      07/08/2019 lúc 15:38

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

      Bình luận
  8. Dat Nguyen 58 bình luậnviế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

    Bình luận
    • Trung Hiếu Quản lý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.

      Bình luận
  9. Thang ngo Nguyen 2 bình luậnviế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

    Bình luận
    • Trung Hiếu Quản lý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

      Bình luận
  10. Sơn Gia 2 bình luậnviế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.

    Bình luận
« 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!

Tham gia cùng 10.000+ người khác.

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

Facebook Group

wpcanban-facebook-group

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

Thủ thuật CloudFlare

Thủ thuật LiteSpeed

Thủ thuật WooCommerce

Sử dụng theme Paradise

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

dich-vu-toi-uu-wordpress-mien-phi

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

dich-vu-quet-ma-doc-wordpress-mien-phi

Footer

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

  • Plugin chống copy nội dung siêu nhẹ cho WordPress 20/05/2025
  • Tự động tạo alt-text cho hình ảnh trong WordPress 18/05/2025
  • Năm 2025 rồi, có nên viết blog nữa không? 07/05/2025
  • Ra mắt plugin APCu Object Cache độc quyền tại WP Căn bản 16/04/2025

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

  • Trung Hiếu trong Bật mí về các công nghệ mà WP Căn bản đang sử dụng
  • Khánh trong Bật mí về các công nghệ mà WP Căn bản đang sử dụng
  • Trung Hiếu trong Năm 2025 rồi, có nên viết blog nữa không?
  • Tuấn Kỷ Nguyên Blog trong Năm 2025 rồi, có nên viết blog nữa không?

Thông tin hữu ích

  • Giới thiệu bản thân
  • 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

9 Chuyên mục - 1.001 Bài viết - 35.504 Bình luận

Bản quyền © 2014 - 2025 · WP Căn bản (tiền thân là eBooksvn.com) · Sử dụng Paradise child theme và dịch vụ WordPress Hosting