• Biết lưu trữ Google Fonts cục bộ trên trang WordPress của mình?
  Nâng cấp chỉ số google Speed.
• Không chỉ là cách lưu trữ Google font chữ cục bộ trên WordPress.
  Bạn có thể sử dụng với bất kỳ fonts chữ nào
• Ngoài phương pháp thủ công đó, tôi cũng sẽ chia sẻ một plugin giúp lưu trữ Google Fonts bằng plugins

Đọc phần hướng dẫn dưới đây :

Tại sao nên Lưu trữ font trên server?

Tôi thực sự không nghĩ rằng hầu hết các trang web cần lưu trữ phông chữ cục bộ.

Nhưng nó là một lựa chọn tốt cho một số trang web.

Trước hết, lưu trữ phông chữ cục bộ mở ra toàn bộ thế giới phông chữ trên web.

Bạn sẽ có thể sử dụng bất kỳ phông chữ nào bạn tìm thấy và có quyền hợp pháp. Và điều đó khá tuyệt!

Ngoài ra, có thể tăng hiệu suất từ ​​việc lưu trữ phông chữ cục bộ vì bạn có thể cắt các yêu cầu bên ngoài tới bất kỳ máy chủ nào đang lưu trữ phông chữ của bạn.

Ví dụ: bạn có thể thấy yêu cầu bên ngoài đó đối với máy chủ của Google cho một phông chữ trong thác nước Công cụ Pingdom trên trang web thử nghiệm của tôi:

Bây giờ, điều này chắc chắn không có nghĩa là lưu trữ các phông chữ cục bộ sẽ luôn làm cho trang web của bạn tải nhanh hơn.

Khi bạn đang nói về Google Fonts, các máy chủ của Google đã khá nhanh và Google Fonts có CDN riêng để đảm bảo thời gian tải toàn cầu nhanh chóng.

Ngoài ra, có thể trình duyệt của ai đó đã có phông chữ được lưu trong bộ nhớ cache, đặc biệt nếu bạn đang sử dụng một phông chữ phổ biến như Lato hoặc Roboto.

Về cơ bản, tôi khuyến khích bạn kiểm tra trang web của mình trước và sau đó để đảm bảo rằng việc lưu trữ các phông chữ cục bộ thực sự đang tăng tốc trang web của bạn.

Phương pháp thủ công

Được rồi, bây giờ chúng ta hãy bắt đầu phần hướng dẫn và tôi sẽ chỉ cho bạn cách lưu trữ Google Fonts cục bộ trên WordPress.

Hãy nhớ rằng – trong khi tôi đang sử dụng Google Fonts làm ví dụ, phương pháp thủ công này cũng sẽ hoạt động với bất kỳ phông chữ nào khác .

Bước 1: Tải xuống tệp phông chữ

Để bắt đầu, bạn cần tải xuống tệp phông chữ mà bạn muốn sử dụng.

Tại Phông chữ Google, bạn có thể nhấp vào liên kết Chọn Phông chữ này . Sau đó nhấp vào nút tải xuống:

Khi bạn nhấp vào nút tải xuống, Google Fonts sẽ cung cấp cho bạn một tệp ZIP với tất cả các trọng lượng khác nhau của phông chữ.

Tuy nhiên, tôi khuyên bạn chỉ nên chọn số lượng trọng lượng phông chữ tối thiểu cần thiết – không sử dụng từng trọng lượng riêng lẻ. Một ngăn xếp tốt là một trong những:

• Đều đặn
• In nghiêng
• Dũng cảm

Vì vậy, giải nén tệp và xóa tất cả các phông chữ mà bạn không muốn sử dụng:

Bước 2: Chuyển đổi sang định dạng WOFF (Nếu cần)

Khi bạn tải xuống một phông chữ từ Google Fonts, nó sẽ cung cấp cho bạn phông chữ ở định dạng TTF. Để đảm bảo khả năng tương thích giữa nhiều trình duyệt, hầu hết các nguồn mà tôi đã đọc dường như khuyên bạn nên sử dụng các định dạng WOFF hoặc WOFF 2.0.

Vì vậy, nếu phông chữ bạn chọn chưa có ở định dạng đó, bạn có thể sử dụng công cụ Convertio miễn phí để chuyển đổi nó thành WOFF:

Bước 3: Tải tệp phông chữ lên máy chủ

Tiếp theo, lấy các tệp phông chữ đó và tải chúng lên máy chủ của bạn bằng Trình quản lý tệp FTP hoặc cPanel. Hãy xem hướng dẫn của chúng tôi về cách sử dụng FTP trên WordPress nếu bạn không chắc chắn về cách kết nối với máy chủ của mình qua FTP.

Để dễ dàng tìm thấy các tệp phông chữ của bạn, bạn có thể thêm chúng vào một thư mục được gọi là phông chữ . Đối với ví dụ này, tôi đã tạo thư mục phông chữ trong thư mục gốc của trang web của mình. Bạn có thể thấy nó trông như thế nào trong ảnh chụp màn hình bên dưới:

Bước 4: Thêm CSS cho mặt phông chữ

Khi bạn đã tải các tệp phông chữ lên máy chủ của mình, bạn cần đưa các phông chữ đó vào CSS của trang web bằng cách sử dụng @ font-face.

Để làm điều này, bạn có thể sử dụng tab CSS bổ sung của WordPress Customizer. Hoặc, bạn có thể sử dụng một plugin như Simple CSS của Tom Usborne , đó là những gì tôi sẽ làm cho những ảnh chụp màn hình này. Để biết thêm, hãy xem bài đăng của chúng tôi về cách thêm CSS tùy chỉnh vào WordPress một cách an toàn .

Khi bạn đã chọn phương pháp của mình để thêm CSS tùy chỉnh, đây là CSS chính xác mà bạn cần:

@font-face {

font-family: ‘roboto-regular’;

src: url(‘https://vast-termite.w5.wpsandbox.pro/fonts/Robot-Regular.woff’) format(‘woff’);

font-weight: normal;

font-style: normal;

}

Đối với đoạn mã này:

• Đặt họ phông chữ thành tên của họ phông chữ thực tế
• Thay thế URL bằng URL thực thành tệp phông chữ có liên quan trên máy chủ của bạn

Bạn cũng sẽ muốn lặp lại đoạn mã cho từng tệp phông chữ riêng biệt mà bạn đang sử dụng. Đây là giao diện của ba tệp phông chữ trên trang web của tôi:

Bước 5: Thêm CSS để sử dụng phông chữ ở đâu

Bây giờ, tất cả những gì còn lại cần làm là bắt đầu sử dụng phông chữ trong CSS của bạn!

Ví dụ: nếu tôi muốn làm cho tất cả văn bản nội dung của mình sử dụng phông chữ Roboto Regular mà tôi hiện đang tự lưu trữ, tôi sẽ sử dụng CSS này:

body {font-family: 'roboto-regular', Arial, sans-serif;}

Bạn có thể thêm CSS này vào cùng một vị trí mà bạn đã thêm mã CSS từ Bước 4.

Tôi sẽ cho bạn thấy sự khác biệt bằng cách sử dụng GIF của WordPress Customizer. Xem phần nội dung khi tôi thêm CSS mới:

Bước 6: Ngừng tải chủ đề của Google Fonts

Nếu trang web của bạn vẫn đang tải phông chữ từ máy chủ Google Fonts, có thể là do chủ đề của bạn cho rằng nó vẫn cần sử dụng phông chữ được lưu trữ trên máy chủ của Google Fonts.

Để ngăn chặn điều đó, bạn có thể thử cài đặt chủ đề của mình để sử dụng ngăn xếp phông chữ hệ thống (nếu có). Ví dụ: GeneratePress cho phép tôi thực hiện lựa chọn đó trong WordPress Customizer:

Hoặc, bạn cũng có thể xóa các phần có liên quan khỏi tệp functions.php của chủ đề. Hoặc, như nhận xét cho biết, bạn có thể sử dụng một chủ đề con để ghi đè nó:

Bạn cũng có thể thử plugin Disable Google Fonts , mặc dù không có gì đảm bảo rằng nó hoạt động cho mọi chủ đề.

Cách lưu trữ Google Phông chữ cục bộ với một plugin

Nếu bạn bị choáng ngợp bởi phương pháp thủ công, bạn cũng có thể lưu trữ Google Fonts cục bộ bằng cách sử dụng plugin WordPress có tên CAOS cho Webfonts từ Daan van den Bergh .

Tôi chưa thử nghiệm rộng rãi plugin, nhưng nó có vẻ khá dễ sử dụng. Tất cả những gì bạn làm là tìm kiếm phông chữ theo tên và nhấp vào Tạo biểu định kiểu :

Bạn cũng có thể chọn chính xác trọng lượng để bao gồm.

Khi plugin tạo biểu định kiểu, nó sẽ thêm nó vào tiêu đề chủ đề của bạn.

Mặc dù plugin này rất dễ sử dụng, nhưng nó sẽ chỉ hoạt động với Google Fonts, trong khi phương pháp thủ công sẽ hoạt động với bất kỳ phông chữ nào.

Dùng thử Phông chữ Lưu trữ cục bộ ngay hôm nay

Lưu trữ phông chữ cục bộ là một cách tuyệt vời để mở trang web của bạn lên các phông chữ mới và có thể tăng tốc trang web của bạn.

Nếu bạn đặc biệt muốn lưu trữ Google Fonts cục bộ, có những plugin có thể giúp bạn làm điều đó. Hoặc, bạn luôn có thể đi theo lộ trình thủ công sẽ hoạt động đối với bất kỳ phông chữ web nào.

Cuối cùng, như với bất kỳ thay đổi quan trọng nào đối với trang web WordPress của bạn , tôi luôn khuyên bạn nên thử nghiệm để xem liệu các phông chữ lưu trữ cục bộ có thực sự tăng tốc trang web của bạn hay không. Nếu bạn nhận thấy rằng bạn không nhận được những lợi ích về hiệu suất mà bạn mong đợi, bạn có thể muốn xem xét việc sử dụng CDN để cung cấp các tệp phông chữ của mình.

Bạn có bất kỳ câu hỏi nào khác về cách lưu trữ các phông chữ cục bộ trên WordPress không? Hãy cho chúng tôi biết trong phần bình luận và chúng tôi sẽ cố gắng trợ giúp!