Tăng tốc độ website bằng cách lưu trữ font google ngay trên host

xóa google font
5/5 - (1132 bình chọn)

Hướng dẫn tăng tốc độ website bằng cách lưu trữ Font Google lên trên hosting cực kì đơn giản.Trên thực tế dù chúng ta có loại bỏ hoặc tải không đồng bộ Google Font thì nó vẫn tải từ ngoài host và ảnh hưởng không nhỏ đến tốc độ load trang web của chúng ta. Vậy nên mình sẽ hướng dẫn các bạn cách đơn giản mà hiệu quả nhất. Sau khi hoàn thành các bạn thử trải nghiệm xem như thế nào nhé.

Xác định Google Font

Khi các bạn sử dụng các tool để kiểm tra website của mình xem có google font hay không nếu các bạn thấy 1 đoạn code như sau:

</pre><pre><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' /></pre><pre>

Thì ở đoạn code trên chúng ta sẽ thấy được Font mà chúng ta đang sử dụng là font Roboto và Kameron với các Style 300, 700 với charset latin. Bây giờ chúng ta cùng đưa font Roboto lên Host của chúng ta nhé.

Lưu trữ google font lên trên host

Bước 1: Truy cập : https://google-webfonts-helper.herokuapp.com/fonts Nhập font mà chúng ta đang sử dụng. Ví dụ font bạn đang sử dụng là Roboto thì chúng ta điền vào khung ngay bên trái.

google font
google font

  Tong mục Select Charsets chọn vào loại mà bạn muốn.

google font
google font

Bước 2: Trong mục Select styles tích vào style bạn mong muốn hoặc đang sử dụng.

google font
google font
Bước 3: Coppy toàn bộ nội dung trong Best Support
google font
Bước 4: Download file chứa mã nguồn:
google font
Bước 5: Tải file bạn vừa download về lên host của bạn trong public_html với tên thư mục là fonts cho nó bằng cấp với các mục wp-content, wp-admin,..( nhớ là bằng cấp và không phải là bên trong bất kì 1 mục nào khác nhé) Upload và giải nén file vừa tải về.
google font
Bước 6: Chúng ta sao chép đoạn code tại bước 3 vào trong Custom CSS Tại mục tùy biến nhé.
google font
Sau đó chúng ta Xóa google font là được
Nếu trong Flatsome thì bạn vào Tùy biến – Typography – Font – Disable Google Font
Nếu có cache thì nhớ xóa cache và hưởng thành quả nhé.
Chúc các bạn thành công và tăng tốc được website của mình nhanh hơn nhé.
Subscribe
Notify of
guest
1 Bình luận
Cũ nhất
Mới nhất Được bình chọn nhiều nhất
Phản hồi nội tuyến
Xem tất cả các bình luận
trackback

[…] bài viết trước mình có giới thiệu cách tăng tốc độ website bằng cách đưa google font lên webhost. Còn trong bài viết này mình xin giới thiệu cách tốc độ website gần như ngay […]

1
0
Bạn đang nghĩ gì? Hãy bình luận nhé <3x