Hướng dẫn Self-hosting Google Fonts

Cách đây không lâu, chúng ta đã thảo luận những lý do để self-hosting thay vì sử dụng Google Fonts. Không chỉ giảm bớt phụ thuộc vào bên thứ ba, hay hạn chế thông tin khách truy cập không bị thu thập bởi Google, self-hosting còn giúp cải thiện thời gian tải trang trong nhiều trường hợp. Vậy làm thế nào để tự lưu trữ (self-hosting) Google Fonts?

Xác định tên và thuộc tính của phông chữ

Để đảm bảo giao diện website không bị ảnh hưởng, trước tên chúng ta cần xác định tên và thuộc tính của phông chữ đang sử dụng. Chúng ta có thể sử dụng công cụ Inspect hay View page source có trên trình duyệt hoặc các trang web giống như GTmetrix. Truy cập vào trang web cần kiểm tra, bật tính năng Inspect từ chuột phải, chuyển qua tab Networktải lại trang. Đối với View page source thì chỉ cần ấn tổ hợp phím Ctrl + U, tìm đoạn css được tải từ Google Fonts, gần giống với bên dưới:
Code:
https://fonts.googleapis.com/css2?family=Inter:[email protected];500;700&display=swap
Như ở đây mình đang có là font Inter và có độ đậm là 400, 500, 700.

Self-hosting Google Fonts

Tất cả những phông chữ có trên Google Fonts đều là opensource nên việc tự lưu trữ là hoàn toàn hợp pháp. Google Fonts cũng cho phép người dùng tải phông chữ từ trang web của họ thông qua nút Download family. Tuy nhiên cách này không thực sự hiệu quả. Những file được tải không chỉ có kích thước lớn hơn mà cách đặt tên cũng không giống như thuộc tính phông chữ tìm được ở bước trước. Chúng ta sẽ sử dụng google webfonts helper.

1. Tìm và chọn phông thông qua ô tìm kiếm góc trên bên trái.
google-webfonts-helper-search.png


2. Chọn charset của phông, mặc định sẽ là latin. Chỉ nên chọn những charset cần dùng. Tuy tiếng Việt cũng sử dụng bảng chữ cái latin nhưng charset latin sẽ không bao gồm toàn bộ những ký tự dùng trong tiếng Việt. Những charset có đuôi -ext là bản mở rộng của bản không có đuôi.
google-webfonts-helper-charset-selection.png


3. Chọn font-weight (độ đậm nhạt của chữ) đã xác định trước đó. Ở đây, regular sẽ thay thế cho 400
google-webfonts-helper-style-selection.png


4. Chuyển sang Modern Browsers, copy đoạn CSS mẫu bên dưới và tải nén chứa phông chữ về.
google-webfonts-helper-last-steps.png

Nhiều bạn sẽ thắc mắc vì sao lại chọn Modern Browsers thay vì Best Support. Modern Browsers sẽ hỗ trợ những phiên bản trình duyệt phát hành từ 2010, có nghĩa là gần như tất cả mọi người đều đã được hỗ trợ.

4. Tạo một folder fonts trên host để chứa phông chữ, tiện quản lý sau này. Giải nén và upload file phông chữ. Các bạn có thể sử dụng FTP hoặc File Manager có sẵn trên Control Panel để upload.
directadmin-font-folder.png


5. Trước đó google webfonts helper đã cho chúng ta một đoạn CSS mẫu. Giờ mình sẽ thay đổi đoạn này một tí.
Code:
/* inter-regular - vietnamese */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  src: local(''),
       url('../fonts/inter-v12-vietnamese-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('../fonts/inter-v12-vietnamese-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* inter-500 - vietnamese */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  src: local(''),
       url('../fonts/inter-v12-vietnamese-500.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('../fonts/inter-v12-vietnamese-500.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* inter-700 - vietnamese */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  src: local(''),
       url('../fonts/inter-v12-vietnamese-700.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('../fonts/inter-v12-vietnamese-700.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
  • Thêm font-display: swap; vào trước } ở tất cả font-face. Đoạn này sẽ giúp tránh tình trạng trắng chữ khi font chưa được tải.
  • Thay đường dẫn phông cho phù hợp.
Sau bước này chúng ta sẽ có được một đoạn CSS giống với bên dưới:
Code:
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400;
    src: local(''),
        url('https://domain.com/fonts/inter/inter-v12-vietnamese-regular.woff2') format('woff2'),
        url('https://domain.com/fonts/inter/inter-v12-vietnamese-regular.woff') format('woff');
    font-display: swap;
}
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 500;
    src: local(''),
        url('https://domain.com/fonts/inter/inter-v12-vietnamese-500.woff2') format('woff2'),
        url('https://domain.com/fonts/inter/inter-v12-vietnamese-500.woff') format('woff');
    font-display: swap;
}
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 700;
    src: local(''),
        url('https://domain.com/fonts/inter/inter-v12-vietnamese-700.woff2') format('woff2'),
        url('https://domain.com/fonts/inter/inter-v12-vietnamese-700.woff') format('woff');
    font-display: swap;
}
Các bạn có thể dùng URL relative path thay vì absolute path ở đoạn này.

6. Chúng ta sẽ thêm đoạn CSS ở bước trên vào CSS của website và gỡ Google Fonts khỏi website. Bước này phụ thuộc vào mã nguồn website nên các bạn tự làm nhé. Như với XenForo thì sẽ thêm vào extra.less, WordPress thì có thể thêm vào Appearance => Customize => Additional CSS hoặc sử dụng Custom CSS của theme. WordPress có thể dùng plugin Disable Google Fonts hoặc Autoptimize để gỡ.
autoptimize-google-fonts-disabled.png


7. Cuối cùng là kiểm tra xem font đã được load từ tên miền của website chưa. Như hình bên dưới là VietFriend đã chuyển qua self-hosting thay vì sử dụng Google Fonts rồi.
vietfirend.org-self-hosting-inter.png


Tổng kết

Như vậy chúng ta đã đi qua hầu hết các bước để chuyển từ Google Fonts sang self-hosting. Nếu như website của bạn đang sử dụng Google Fonts thì có thể thử những bước này và kiểm tra xem website có tải nhanh hơn không. Một số bước không được hướng dẫn chi tiết vì nó còn phụ thuộc vào Control Panel hay mã nguồn website. Nếu như gặp khó khăn trong quá trình chuyển đổi thì cũng có thể hỏi mọi người ở đây.
 

Trending threads

Top