Khắc phục lỗi chặn CSS cho Google Font

Nếu những font mặc định được cung cấp sẵn (có trên các Hệ điều hành) chưa làm bạn hài lòng thì bạn có thể sử dụng Google Font. Toàn bộ các font trong Google font là những font hoàn toàn miễn phí và bạn có thể sử dụng những font chữ đó cho bất kỳ một Website nào.
Thông thường để nhúng Google Font vào Blogspot ta sử dụng:

<link href='https://fonts.googleapis.com/css?family=Roboto:400,500' rel='stylesheet' type='text/css'/>

Bằng cách trên, các trình duyệt riêng biệt như Chrome, Firefox... sẽ tự động điều chỉnh để tải font tương ứng về sao cho phù hợp nhất. Tuy nhiên thì cách này sẽ dẫn tới việc Blog hay Website sẽ bị chặn hiển thị CSS (blocking render CSS). Để khắc phục vấn đề này thì ta sử dụng @font-face, truy cập vào đường dẫn của font, ví dụ như https://fonts.googleapis.com/css?family=Roboto:400,500. Chỉ cần chọn CSS cho font phù hợp với ngôn ngữ của trang Web, ví dụ như:

@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: local('Roboto'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/roboto/v15/NdF9MtnOpLzo-noMoG0miPesZW2xOQ-xsNqO47m55DA.woff2) format('woff2');
  unicode-range: U+0102-0103, U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 500;
  src: local('Roboto Medium'), local('Roboto-Medium'), url(https://fonts.gstatic.com/s/roboto/v15/mbmhprMH69Zi6eEPBYVFhRJtnKITppOI_IvcXXDNrsc.woff2) format('woff2');
  unicode-range: U+0102-0103, U+1EA0-1EF9, U+20AB;
}

Ở đây ta chỉ mới lấy được đường dẫn font có đuôi woff2, và sẽ không tương thích được với tất cả các trình duyệt. Để font hiển thị đúng cho tất cả trình duyệt hiện nay thì cần phải có được đường dẫn url cho font có đuôi woff, ttf... như:

@font-face {
  font-family: 'MyWebFont';
  src: url('myfont.woff2') format('woff2'),
       url('myfont.woff') format('woff'),
       url('myfont.ttf') format('truetype');
}

Hướng dẫn lấy url cho font dạng woff và ttf:

Áp dụng cho các bạn dùng trình duyệt Chrome
   1. Cài Extension User-Agent Switcher for Google Chrome
   2. Sau khi cài xong, truy cập vào đường dẫn font, ví dụ: https://fonts.googleapis.com/css?family=Roboto:400,500. Sau đó click vào biểu tượng hình quả cầu của extension vừa cài, chọn trình duyệt Internet Explorer 10:

 ta sẽ được font có đuôi woff:

@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: local('Roboto'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/roboto/v15/2UX7WLTfW3W8TclTUvlFyQ.woff) format('woff');
}
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 500;
  src: local('Roboto Medium'), local('Roboto-Medium'), url(https://fonts.gstatic.com/s/roboto/v15/RxZJdnzeo3R5zSexge8UUT8E0i7KZn-EPnyo3HZu7kw.woff) format('woff');
}

   3. Để lấy font có đuôi ttf, ta click vào biểu tượng extension bên trên, chọn trình duyệt Safari on Windows, ta được:

@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: local('Roboto'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/roboto/v15/zN7GBFwfMP4uA6AR0HCoLQ.ttf) format('truetype');
}
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 500;
  src: local('Roboto Medium'), local('Roboto-Medium'), url(https://fonts.gstatic.com/s/roboto/v15/RxZJdnzeo3R5zSexge8UUaCWcynf_cDxXwCLxiixG1c.ttf) format('truetype');
}

Sau khi lấy được font với các đuôi mở rộng bên trên, ta kết hợp lại như sau:

@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 400;
src: local('Roboto'), local('Roboto-Regular'), url(http://fonts.gstatic.com/s/roboto/v15/NdF9MtnOpLzo-noMoG0miPesZW2xOQ-xsNqO47m55DA.woff2) format('woff2'), url(https://fonts.gstatic.com/s/roboto/v15/2UX7WLTfW3W8TclTUvlFyQ.woff) format('woff'), url(https://fonts.gstatic.com/s/roboto/v15/zN7GBFwfMP4uA6AR0HCoLQ.ttf) format('truetype');
}
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 500;
  src: local('Roboto Medium'), local('Roboto-Medium'), url(https://fonts.gstatic.com/s/roboto/v15/mbmhprMH69Zi6eEPBYVFhRJtnKITppOI_IvcXXDNrsc.woff2) format('woff2'), url(https://fonts.gstatic.com/s/roboto/v15/RxZJdnzeo3R5zSexge8UUT8E0i7KZn-EPnyo3HZu7kw.woff) format('woff'), url(https://fonts.gstatic.com/s/roboto/v15/RxZJdnzeo3R5zSexge8UUaCWcynf_cDxXwCLxiixG1c.ttf) format('truetype');
}

Với việc sử dụng CSS như trên để nhúng Google font vào Blogspot thì CSS sẽ không bị chặn nữa.