Với hơn 1.250 phông chữ mã nguồn mở, miễn phí, Google Fonts là một nguồn tài nguyên tuyệt vời cho các nhà thiết kế web. Hầu như mọi kiểu chữ đều có sẵn ở đây và hơn 135 ngôn ngữ được trình bày.
Thông thường, các phông chữ này được triển khai thông qua API Google Fonts. Thêm một vài đoạn mã vào trang web của bạn, gọi các phông chữ trong CSS của bạn và gọi nó là một ngày. Dễ dàng, phải không? Và quá trình này thậm chí có thể dễ dàng hơn nếu bạn đang sử dụng một plugin hoặc chủ đề cho phép bạn chọn phông chữ khi bạn thực hiện.
Nhưng cũng có những lý do thuyết phục để lưu trữ Google Fonts cục bộ trên máy chủ web của bạn. Quyền riêng tư là một, vì một số khu vực pháp lý có cai trị rằng lưu trữ phông chữ từ xa vi phạm luật GDPR của Châu Âu.
Hiệu suất là một tiềm năng khác được xem xét. Trong khi có một số tranh luận về lưu trữ cục bộ so với API Google Fonts, Sự khác biệt dường như là tương đối nhỏ. Tùy chọn sử dụng mạng phân phối nội dung (CDN) cũng là một khả năng.
Nếu bạn đang muốn lưu trữ Google Fonts tại địa phương, chúng tôi sẽ giới thiệu cho bạn một cách dễ dàng để triển khai chúng. Nghiêm túc đấy – bạn có thể thiết lập và chạy trong vòng vài phút!
Đầu tiên, xác định Phông chữ Google mà bạn muốn sử dụng
Bước đầu tiên của quy trình là xác định Phông chữ Google nào bạn muốn sử dụng trong dự án của mình. Duyệt qua trang web chính thức và lưu ý những điều sau:
- Tên phông chữ;
- (Các) phong cách bạn muốn sử dụng;
- (Các) ngôn ngữ bạn cần;
Bây giờ bạn có thể tải xuống các lựa chọn của bạn trực tiếp từ Google Fonts. Và mặc dù không có gì sai với phương pháp này, nhưng nó có thể hơi rườm rà.
Để sử dụng các phông chữ trên trang web của bạn, bạn cũng phải gọi các tệp được lưu trữ cục bộ qua @font-face trong CSS của bạn. Điều đó liên quan đến việc xem mã nguồn của Google cho từng phông chữ, sau đó chọn bộ ký tự chính xác và thay đổi src thuộc tính phù hợp với nơi lưu trữ phông chữ của bạn.
Ví dụ: nếu chúng ta muốn sử dụng “ánh sáng”, CSS trông như thế này (nhận xét được thêm / chỉnh sửa cho rõ ràng):
/* latin - is this the only character set we need? */
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 100;
src: url(https://fonts.gstatic.com/s/roboto/v29/KFOkCnqEu92Fr1MmgVxIIzI.woff2) format('woff2'); /* Change to match your local font location */
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; /* This isn't needed at all */
}Có lẽ đó không phải là điều tồi tệ nhất trên thế giới. Nhưng nếu bạn có nhiều phông chữ, mỗi phông chữ có nhiều kiểu, điều này có thể trở nên rất tẻ nhạt.
Thêm phông chữ bằng Google Webfonts Helper
Lưu trữ Google Fonts cục bộ không cần phải quá phức tạp. Các google-webfonts-helper là một công cụ làm cho quá trình trở nên cực kỳ trơn tru. Nó thực hiện tất cả các công việc nặng nhọc cho bạn.
Trước khi bắt đầu, hãy lưu ý: có thể có sự khác biệt về phiên bản giữa google-webfonts-helper và chính Google Fonts. Google Fonts được cải thiện theo thời gian. Không sử dụng API có nghĩa là không phải lúc nào cũng có phiên bản mới nhất.
Để bắt đầu, hãy tìm kiếm (các) phông chữ bạn muốn sử dụng. Lưu ý rằng bạn chỉ có thể làm việc với một phông chữ tại một thời điểm. Các bước dưới đây sẽ cần được lặp lại cho mỗi phông chữ bổ sung.
Trong trường hợp của chúng tôi, chúng tôi sẽ tìm thấy một trong những phông chữ phổ biến nhất của Google, Roboto, từ danh sách.
Tiếp theo, đã đến lúc chọn bộ ký tự (charset) và kiểu mà chúng ta cần.
Dựa trên lựa chọn ký tự và kiểu của chúng tôi, google-webfonts-helper tạo CSS cần thiết. Theo mặc định, mã này nhằm mục đích hỗ trợ nhiều trình duyệt nhất có thể. Tuy nhiên, chúng tôi cũng có thể chọn tập trung vào các trình duyệt hiện đại.
Nó thậm chí còn cho phép chúng tôi chỉnh sửa thư mục cơ sở nơi chúng tôi muốn lưu trữ các tệp phông chữ. Điều này sẽ được phản ánh ngay lập tức trong CSS.
Với tất cả các cài đặt của chúng tôi hiện đã được áp dụng, bạn có thể tải xuống tệp lưu trữ .ZIP. Chúng tôi sẽ giải nén tệp lưu trữ đến đích đã chọn và tải nó lên máy chủ web của chúng tôi.
Cuối cùng, chúng tôi sẽ dán @font-face mã vào CSS của chúng tôi. Ghi chú về font-family chúng tôi có thể thêm các phông chữ này vào bất kỳ bộ chọn CSS nào mà chúng tôi muốn.
Cung cấp Google Phông chữ tại địa phương
Với một vài bước đơn giản (và sự hỗ trợ từ google-webfonts-helper), bạn có thể bỏ qua API Google Fonts và các phông chữ lưu trữ cục bộ. Nó không chỉ cải thiện quyền riêng tư của người dùng mà còn giúp tránh các biến chứng tiềm ẩn từ thời gian ngừng hoạt động của API hoặc tắc nghẽn hiệu suất.
Điều đó đang được nói, các phông chữ được lưu trữ cục bộ có nghĩa là làm việc nhiều hơn cho máy chủ web của bạn. Vì vậy, điều quan trọng vẫn là sử dụng bộ nhớ đệm và các tối ưu hóa khác. Những yếu tố này nên được xem xét trước khi bạn lao vào.
Bất kể bạn sử dụng Google Fonts như thế nào, thật tuyệt khi biết rằng có nhiều cách để làm như vậy. Điều này cho phép bạn chọn phương pháp tốt nhất cho nhu cầu của bạn. Và lưu trữ chúng tại địa phương có thể là cách phù hợp để đi.
