Web Font Là Gì? Web Font Có Tầm Quan Trọng Thế Nào?

Phông chữ web, hay còn gọi web font, là một trong những nhân tố không thể thiếu giúp các trang web trông đẹp mắt và dễ tương tác hơn. Hãy cùng HTTL tìm hiểu web font là gì? cách thức hoạt động của web font cũng như tầm quan trọng của chúng trong trải nghiệm duyệt web thông thường qua bài viết dưới đây.

I. Desktop Font và Web Font

Trong quá trình sử dụng máy tính, người ta sẽ phải thường xuyên tương tác với các phông chữ bao gồm những phông chữ đi kèm với hệ điều hành, từ các ứng dụng như Adobe Creative Suite, Microsoft Office, hoặc được tích hợp sẵn trong những ứng dụng mà bạn download, mua và cài đặt trên hệ thống.

Khi các phông chữ này được cài đặt, bạn sẽ có thể sử dụng chúng trong các ứng dụng như công cụ xử lý văn bản, các phần mềm chỉnh sửa hình ảnh,… Đây được gọi chung là các desktop font và chúng sẽ được lưu trữ cục bộ trên máy tính..

Ngoài ra, còn có một loại phông chữ khác giữ vai trò quan trọng hơn trong trải nghiệm sử dụng máy tính của người dùng khi chuyển sang môi trường trực tuyến, đ chínhó là các phông chữ trên web, hay web font. Đây là kiểu chữ được lưu trữ trên đám mây và sau đó nó được lưu vào bộ nhớ cache trong trình duyệt, từ đó nó được sử dụng để tạo ra văn bản trên các trang web mà bạn nhìn thấy khi truy cập.

II. Lược sử về web font

Ở giai đoạn sơ khai của Internet, kiểu chữ trên các trang web thường bị giới hạn ở những phông chữ cục bộ được cài đặt sẵn trên hệ thống máy của người dùng. Nếu một phông chữ chưa được cài đặt, trang web sẽ tải kèm một phông chữ dự phòng tiêu chuẩn khác để thay thế. Do đó, các nhà thiết kế web thường sẽ chọn phông chữ hệ thống mặc định cho các trang web của họ và điều này vô tình khiến giao diện trang web trở nên khá nhàm chán vì không có sự đa dạng về phông chữ được sử dụng.

Trong số những gói phông chữ được sử dụng phổ biến trên các trang web lúc bấy giờ là Core Fonts for Web. Về cơ bản, đây là một tập hợp các kiểu chữ được sử dụng miễn phí cho các nhà thiết kế web, bao gồm các phông chữ hệ thống được dùng trên máy tính Windows như Arial, Times New Roman, Comic Sans hay Trebuchet. Ngoài ra, các nhà thiết kế cũng có thể sử dụng các phông chữ như Monospace , Serif hoặc Sans-Serif để chỉ định kiểu định dạng chung ngay cả khi không có một phông chữ cụ thể có sẵn.

Tuy nhiên, điều này đã được thay đổi từ năm 2010 khi Google tung ra Google Fonts – một kho lưu trữ mã nguồn khổng lồ cho các phông chữ miễn phí và có thể được sử dụng ở mọi nơi trên internet. Kể từ đó, các đối thủ cạnh tranh khác như Adobe’s Typekit hay các plugin phông chữ được lưu trữ trên web bắt đầu xuất hiện, mang đến một thế giới phông chữ web phong phú hơn. Hiện nay, có đến hàng triệu trang web trên thế giới đang sử dụng các dạng phông chữ web nhằm mang đến cho người dùng trải nghiệm đa dạng, thú vị.

III. Hình thức hoạt động của web font

Google Fonts – Nhà cung cấp kho phông chữ web lớn nhất hiện nay, là thư viện web rộng lớn với hơn một nghìn gói phông chữ khác nhau. Bạn có thể sử dụng chúng trên trang web cá nhân bằng cách kéo chúng qua CSS. Đồng thời, các nhà phát triển thiết bị di động cũng có thể dễ dàng truy cập và sử dụng các gói phông chữ này khi tạo ứng dụng cho hệ điều hành Android.

Một trang web khi được cài đặt sử dụng Google Fonts, nó sẽ lấy phông chữ từ cơ sở dữ liệu của Google, sau đó hiển thị văn bản tương ứng mỗi khi bạn truy cập vào trang web đó bằng trình duyệt. Những gói phông chữ này sẽ được lưu trữ trên máy chủ của Google và có thể được tải gần như lập tức. Các dịch vụ phông chữ đám mây khác cũng có cách thức hoạt động tương tự.

Một giải pháp thay thế khác hiện nay là sử dụng phông chữ nhúng và tự lưu trữ trên web. Điều này cần được thực hiện thông qua Web Open Font Format (WOFF) — một tệp phông chữ nén do nhà Mozilla phát triển và tương thích với hầu hết các trình duyệt web hiện đại. WOFF sẽ là giải pháp thay thế hữu ích nếu bạn muốn nhúng một phông chữ tùy chỉnh mà không có sẵn trong các kho phông chữ web.

IV. Sử dụng phông chữ Web

Về cơ bản, kho lưu trữ Google Fonts cùng tất cả các phông chữ trong đó đều được sử dụng miễn phí và mọi người đều có thể truy cập được. Các phông chữ đó được sử dụng theo giấy phép mở và rất nhiều trong số này đã là phông chữ “kinh điển” trong thiết kế web như là Roboto, Lato hay Montserrat. Google hiện tại còn cung cấp một trang web liệt kê tất cả các phông chữ có sẵn và cho phép người dùng trải nghiệm thử cũng như so sánh chúng với nhau. Vì những phông chữ này cho phép sử dụng miễn phí nên bạn cũng có thể download để sử dụng trên máy tính của mình.

Ngoài ra, nhiều dịch vụ thiết kế web và quản lý nội dung như WordPress, Squarespace cũng có hỗ trợ web font. Nếu bạn đang sử dụng trang web tùy chỉnh, bạn sẽ cần phải tải tệp phông chữ vào máy chủ của mình và sử dụng mã CSS để trỏ đến tệp phông chữ mà mình cần sử dụng.

V. Các loại định dạng web fonts phổ biến

1. Embedded OpenType (EOT)

EOT là một định dạng được Microsoft phát triển hơn 15 năm về trước. EOT thường sẽ không được nén và cũng là định dạng duy nhất mà trình duyệt Internet Explorer từ phiên bản 8 trở xuống có khả năng nhận dạng được khi sử dụng @font-face. Nếu bạn không có ý định hỗ trợ IE8 hoặc các phiên bản thấp hơn thì tốt nhất không nên dùng định dạng font này.

2. TrueType (TTF)

TTF là định dạng font được đồng phát triển bởi Microsoft và Apple vào những năm 1980. Những phiên bản TTF mới sau này thường được gọi là TrueType OpenType. TTF có thể hỗ trợ nhiều trình duyệt cũ, đặc biệt là trên cả những thiết bị di động. Ngoài ra, TTF còn cung cấp thêm một cơ chế quản lý bản quyền số cơ bản. Theo đó, một giá trị cờ khi được nhúng vào font sẽ xác định người dùng font có quyền được tích hợp vào file PDFs hoặc websites hay không. Đối với các phiên bản IE từ 9 trở lên, TTF sẽ chỉ hoạt động được nếu những bit tích hợp được đặt về giá trị installable.

3. Web Open Font Format (WOFF)

WOFF được phát triển bởi Mozilla cùng một số tổ chức khác từ năm 2009. WOFF fonts thường sẽ load nhanh hơn so với những định dạng khác bởi nó là phiên bản nén. Nó được cấu tạo kết hợp từ 2 loại font là OpenType và TrueType. Đồng thời, định dạng này cũng có thể chứa metadata cũng như những thông tin về giấy phép sử dụng.

4. Web Open Font Format 2 (WOFF2)

WOFF2 là phiên bản nâng cấp của WOFF và được phát triển bởi Google. Đây được coi là định dạng web font tốt nhất hiện nay bởi dung lượng nhỏ mà vẫn hỗ trợ tốt cho các trình duyệt về mặt hiệu năng. Khả năng nén của WOFF 2 cao hơn khoảng 30% so với WOFF 1 và có thể lên tới hơn 50% trong một số trường hợp đặc biệt.

5. Scalable Vector Graphics (SVG)

SVG fonts có thể hiểu là những file text chứa nhiều đường tượng hình thể hiện các thành phần và thuộc tính SVG chuẩn. Mỗi file sẽ là một đối tượng vector đơn lẻ. Điều này cũng chính là điểm yếu của định dạng font này bởi SVG fonts không thể được nén và thường có kích thước khá lớn. SVG là định dạng duy nhất được sử dụng trong các phiên bản Safari cho iOS từ 4.1 trở xuống. Hiện tại, SVG không còn được hỗ trợ trên các trình duyệt IE, IE Mobile, FireFox hay Opera Mini.

6. TrueType Collection (TTC)

Đây là một phần mở rộng hơn của định dạng TrueType khi mà cho phép gộp nhiều font thành một file. Nó giúp tiết kiệm một phần lớn không gian lưu trữ cho các bộ fonts có nhiều biểu tượng giống nhau. TTC ban đầu chủ yếu được sử dụng trên các phiên bản hệ điều hành Windows tiếng Trung, tiếng Nhật và tiếng Hàn, nhưng sau đó nó được sử dụng rộng rãi trên tất cả các phiên bản của Windows 2000 trở về sau và Mac OS cũng bắt đầu hỗ trợ TTC từ phiên bản Mac OS 8.5.

VI. Tích hợp web fonts

Web fonts được sử dụng qua cú pháp @font-face:

@font-face {

font-family: ‘FontName’;

src: url(‘webfont.eot’); /* IE9+ Compat Modes */

src: url(‘webfont.eot?#iefix’) format(’embedded-opentype’), /* IE6-IE8 */

url(‘webfont.woff2’) format(‘woff2’), /* Super modern browsers */

url(‘webfont.woff’) format(‘woff’), /* Modern browsers */

url(‘webfont.ttf’) format(‘truetype’), /* Safari, Android, iOS */

url(‘webfont.svg#FontName’) format(‘svg’); /* Legacy iOS */

}

Khi font đã được định nghĩa cũng như khai báo, chúng có thể được sử dụng như sau:

body {

font-family: ‘FontName’, Helvetica, Arial, sans-serif;

}

VII. Các lỗi khi sử dụng web fonts

1. CSS3117: @font-face failed cross-origin request. Resource access is restricted

Các lỗi này thường xảy ra trên Firefox và IE khi sử dụng web fonts trên remote servers mà không khai báo tường minh cho header Access-Control-Allow-Origin. Lý do là bởi IE và Firefox mặc định không cho phép font ở một tên miền khác. Trong khi đó, Chrome vẫn sẽ load font bình thường. Nếu không thể nhận ra vấn đề là ở cross-origin thì sẽ rất khó để debug lỗi này. Lúc này, chúng ta sẽ có 2 cách giải quyết, một là để font trên cùng một tên miền hoặc hai là khai báo header trong file .htaccess như sau:

<FilesMatch “.(ttf|otf|eot|woff)$”>

<IfModule mod_headers.c>

Header set Access-Control-Allow-Origin http://mydomain.com”

</IfModule>

</FilesMatch>

2. CSS3114: @font-face failed OpenType embedding permission check. Permission must be Installable

Lỗi này thường sẽ xảy ra khi file EOT đã từng là một file TTF bị khóa (ví dụ sau khi chuyển đổi từ TTF sang EOT). TTF đã khóa có một giá trị cờ tích hợp nhằm để xác định tính hợp pháp khi sử dụng font trên một file hay website. Nhìn chung, có một công cụ cho phép thay thế giá trị cờ này là TTFPatch. Tuy nhiên, TTFPatch không đảm bảo được tính hợp pháp của font. Do đó việc sử dụng font vẫn được coi là vi phạm bản quyền. Tốt nhất, bạn là nên sử dụng font một cách hợp pháp.

3. CSS3111: @font-face encountered unknown error

Lỗi này khá là khó debug bởi nội dung message không cụ thể. Một trong những điều cần làm lúc này đó là kiểm tra lại nguồn gốc của font. Cụ thể như việc chuyển đổi font từ TTF sang EOT có thể sẽ khiến NAME table của file không đúng theo tiêu chuẩn của Microsoft. Do đó, những font EOT này sẽ không được load trên IE và sinh ra lỗi CSS3111. Nếu gặp phải lỗi font này sau khi chuyển đổi từ TTF sang EOT, bạn nên cân nhắc sử dụng bộ chuyển đổi khác.

Gợi ý các trang chuyển đổi font:

• http://www.fontsquirrel.com/fontface/generator
• http://fontface.codeandmore.com
• http://www.font2web.com/
• https://transfonter.org/

Trên đây là một số thông tin liên quan đến Web Font, hy vọng bài viết đã phần nào giúp bạn đọc giải đáp được thắc mắc của mình về “Web Font là gì?”