Mẹo để optimize Google Fonts API mà ít dev để ý đọc (Phần 17)

https://viblo.asia/p/mot-vai-thu-thuat-css-ma-chinh-frontend-co-the-con-chua-biet-phan-17-GrLZDOxeKk0

1. Mẹo để optimize Google Fonts API mà ít dev để ý

Khi bắt gặp 1 thiết kế sử dụng custom font, điều đầu tiên bạn nghĩ ngay đến là Google Fonts API, phải search 1 vòng xem nó có trên đó không? Nếu không có thì lúc này bạn mới nghĩ tới việc lấy font từ Designer hoặc tìm trên mạng tải về và tiến hành convert nó sang các định dạng khác để sử dụng CSS3 @font-face.

Custom font mình không biết nói thế nào cho chuẩn, ý mình đang đề cập những loại font không được cài sẵn trên các hệ điều hành phổ biến như MacOS, Windows hay Linux. Khác với font như Arial là font chữ hầu như HĐH nào cũng có cả, thì Roboto, Open Sans là những loại fonts không phải máy nào cũng có.

Tuy nhiên việc load font từ Google Fonts API thường sẽ gây ra việc load chậm. Vậy nên những mẹo dưới đây sẽ giúp ích rất nhiều cho bạn trong việc giảm thời gian tải font, vì lúc này font được tải về theo chỉ định cụ thể, kiểu như được filter bớt, chứ không phải tải về toàn bộ nữa

Thứ 1: Gộp với nhau bằng dấu + để request 1 lúc nhiều fonts

Tức là thay vì bạn gọi 2 tên font như thế này:

https://fonts.googleapis.com/css?family=Inconsolata
https://fonts.googleapis.com/css?family=Roboto

thì nên gộp thành:

https://fonts.googleapis.com/css?family=Inconsolata|Roboto

Với cách gộp này, việc request sẽ được tối ưu đôi chút.

Thứ 2: Chỉ định cụ thể những dòng text sử dụng font đó

Có những trường hợp chỉ có vài chữ trên web sử dụng font đó thôi, thì ta chỉ định đúng tên cái text đó luôn

https://fonts.googleapis.com/css?family=Inconsolata&text=hello

Với cách này, tốc độ tải font được cải thiện rất đáng kể.