[WebDesign] How to Host Google Fonts Locally

Hello xin chào các bạn, nhân tiện nay đổi toàn bộ font cho đứa con tinh thần cũng xin làm bài viết nhẹ về cách lưu trữ, sử dụng font của google và áp dụng nó lên website. Như các bạn đã biết, font chữ là một yếu tố rất quan trọng trong việc thiết kế trang web, ngoài hình ảnh thì font chữ gần như là yếu tố chủ chốt. Việc chọn cho mình một font chữ đẹp, dễ nhìn giúp site của bạn thêm lung linh hơn.

Ngoài việc sử dụng các font mặc định, ta có thể gọi thêm các font khác mà trong đó google font được rất nhiều webmaster quan tâm. Việc tích hợp hết sức đơn giản chỉ cần truy cập https://fonts.google.com chọn cho mình những font ưng ý và lấy link nhúng dán vào web là xong. Tuy nhiên điều đó hay khi có internet. Lúc code trong tình trạng không có mạng thì có link bằng niềm tin :).

Ngoài ra tôi cũng còn một số lý do như

• Không muốn load quá nhiều tài nguyên từ nguồn thứ 3
• Muốn tùy chỉnh thêm css của font
• Link css google cung cấp chỉ support các Super Modern Browser (đuôi .woff2) , còn rất nhiều các thiết bị, trình duyệt như Safari, Android, iOS (đuôi .ttf), IE9 Compat Modes (đuôi .eot), Modern Browsers (đuôi .woff), Legacy iOS (đuôi .svg)... chưa chắc đã support

thì việc nhúng link từ google thật sự không thấy hào hứng cho lắm.

Giờ tập trung vào nội dung bài viết nào, ví dụ tôi muốn thêm font Open Sans, thì link google cung cấp sẽ như sau

<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">

Gọi CSS sẽ có dạng

font-family: 'Open Sans', sans-serif;

Nhưng tôi chưa vội dán nó vào template của mình, mở liên kết bên trong thuộc tính href để lấy css, ta sẽ thấy thẻ định nghĩa font-face cùng url liên kết font tương ứng.

* Nếu bạn muốn dán trực tiếp vào template của mình thì rất đơn giản chỉ cần xóa hết các thuộc tính local trong src đi chỉ giữ lại url. Như vậy code sẽ có dạng

/* cyrillic-ext */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/opensans/v15/mem8YaGs126MiZpBA-UFWJ0bbck.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/opensans/v15/mem8YaGs126MiZpBA-UFUZ0bbck.woff2) format('woff2');
  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/opensans/v15/mem8YaGs126MiZpBA-UFWZ0bbck.woff2) format('woff2');
  unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/opensans/v15/mem8YaGs126MiZpBA-UFVp0bbck.woff2) format('woff2');
  unicode-range: U+0370-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/opensans/v15/mem8YaGs126MiZpBA-UFWp0bbck.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/opensans/v15/mem8YaGs126MiZpBA-UFW50bbck.woff2) format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/opensans/v15/mem8YaGs126MiZpBA-UFVZ0b.woff2) format('woff2');
  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;
}

Bạn có thể dễ dàng thay đổi tên font (font-family) hoặc các thuộc tính tùy thích

* Nếu bạn muốn tải font về và upload lên host của mình.

Cách 1. Tải thủ công font của google về

Vẫn đường link css đó, bạn sẽ lần lượt tải các file font về, link trong thuộc tính url nhé.

Ví dụ tôi tải và lưu vào thư mục font, sau đó gọi qua file css như sau

Nội dung file CSS

Khi đó bạn có thể thoải mái chạy offline mà không cần đến google nữa

Cách 2: tạo font từ file ttf

Đây là có thể coi là cách "tự tạo font". Từ file font .ttf bạn sẽ tạo ra bộ font theo ý muốn của mình. Bạn tiến hành truy cập vào https://github.com/google/fonts, vào 1 trong 2 thư mục apache hoặc ofl tải font mình mong muốn về (chỉ cần tải các file .ttf).

Tiếp tục truy cập vào trang https://www.fontsquirrel.com/tools/webfont-generator, sau đó upload các file vừa tải về để trang tự tạo các file cần thiết cho bạn. Lựa chọn mặc định Opimal hoặc nâng cao Expert tùy theo nhu cầu

Tải về và trong là đồ nghề cần thiết cho bạn rồi đó, nhớ là gọi css đúng theo font-family nhé

Cách 3: Sử dụng tool giúp tải font google (đề nghị)

Rất đơn giản, chỉ cần truy cập https://google-webfonts-helper.herokuapp.com/fonts, tìm font bạn yêu thích ở panel bên trái, sau đó lựa chọn các style, ngôn ngữ ,... và nhấn vào tải xuống là bạn đã có bộ font offline cực chuẩn rồi (lưu ý nên chọn chế độ Best Support để font hoạt động trên các thiết bị, OS,...)


Để lại nhận xét nếu có thắc mắc và chúc thành công !