Thay đổi Font chữ trên website wordpress, chèn thêm font chữ đẹp vào blog website bằng Font-face

Dạo trước mình có chia sẻ bài viết sử dụng font-face để thay đổi font chữ trên website wordpress. Tuy nhiên bài viết đó mình có xem lại và thấy có một số hạn chế. Là bài gần như chỉ áp dụng trong trường hợp sử dụng wordpress theme flatsome thôi. Phạm vị ứng dụng không được rộng. Nên bài này sẽ hướng dẫn bạn cách chèn thêm font đẹp, font việt hóa hay tất cả mọi font chữ khác. Vào blog, vào website sử dụng bất cứ loại mã nguồn nào bằng Font-face.

trước khi bắt đầu bài này xin các bạn dành chút thời gian tìm hiểu các vấn đề nhỏ sau. Về Font-face là gì? Css là gì? Html là gì? và font chữ là gì? Thì trong phạm vi bài này mình chỉ nói qua về font, font-face và css thôi.

Đầu tiên, Css có khái niệm là gì?

chịu cái này mình không rõ lắm các bạn tìm hiểu thêm ở wikipedia. https://vi.wikipedia.org/wiki/CSS. Còn theo ý hiểu tự nhiên của mình, css như là phần da của website của bạn. Nó mô tả hình dạng bên ngoài một cách trực quan hình dạng website của bạn. Vì thế bạn muốn website của bạn trông đẹp mã. thì bắt buộc phải có phần css.

Tiếp, Font là gì? tại sao lại có font ở đây

thì trong phạm vi này mình chỉ nói qua về khái niệm font theo ý hiểu của cá nhân thôi. theo mình font là một tập hợp hình dạng các loại ký tự đã được định nghĩa sẵn theo từng loại font. nói chung là các bạn sẽ gặp nhiều loại font đẹp. Có nhiều ở trong máy tính hay khi các bạn thiết kế thì hay tải các font-design về để cài vào máy để sử dụng. Nhưng trong bài này thì font sẽ được sử dụng để làm đẹp website cho dễ nhìn hơn.

Font-Face là gì? và dùng font face như thế nào?

font -face là một loạt các quy tắc và định nghĩa hình ảnh hiển thị trên website của bạn. bằng việc tải dữ liệu font mà website đã quy định về client để hiển thị. Điều này giúp cho mọi website có thể sáng tạo không bị gò bó bởi các quy định có sẵn (cái quy định này ngày trước gọi là Web safe fonts).

cách dùng font face thì mình xin chia sẻ 2 cách sử dụng font-face. Cho người biết code và người không biết code. Cho người sử dụng mã nguồn wordpress hay tất cả những mã nguồn khác. Tất cả đều Okie và có kết quả.

Trước khi bắt đầu việc hướng dẫn sử dụng @font face. Các bạn nên chọn cho mình một mẫu font đẹp vừa mắt dễ nhìn. sau đó tiến hành việc convert font sang các định dạng: TrueType , WOFF, WOFF2, EOT lite, EOT compressed, SVG. Lưu ý là tùy thuộc vào mức độ đẹp và chi tiết của font-design mà bạn chọn thì độ nặng của bộ font-face sẽ khác nhau. Tất nhiên cái gì cũng có cái giá của nó, font càng đẹp càng chi tiết thì đổi lại sẽ load hơi lâu hơn 1 xíu.

hướng dẫn chuyển / conver từ font sang bộ @font face

  • đầu tiên chọn font đẹp để chuyển sang font-face (ví dụ mình chọn chuyển bộ font UTM AVO đã được việt hóa)
  • Upload lên www.fontsquirrel.com
  • sau đó để hệ thống chuyển đổi sang font face cho mình rồi tải cả bộ @font-face về.
upload font lên hệ thống và tải về bộ cài đặt font face
upload font lên hệ thống và tải về bộ cài đặt font face

Cách dùng @font face trên website wordpress:

Đối với các bạn không biết code thì thêm font vào wordpress như sau:

  • Thêm các plugin về font, sau đó tùy chọn từng loại font phù hợp theo nhu cầu. (xin phép bài này mình chưa hướng dẫn)

Với mọi người có thể tùy chỉnh code website thì cách thêm font vào wordpress như sau:

  • Upload bộ font-face đã tải về sau khi convert lúc trước lên hosting
  • Chèn mã css vào theme wordpress (có thể áp dụng cho tất cả mọi theme wordpress)

Cách chèn mã css vào website để font face của bạn hoạt động

ở trong bộ kit font face mà bạn tải về có những một file html ví dụ về cách hiển thị của fotn. bạn xem qua 1 xíu và để giải thích:

Mình convert font utm avo regular và có kết quả css như trên. sau khi upload lên hosting của bạn. thì đường dẫn thay đổi. Bạn thay đổi đoạn mã trên phù hơp với đường dẫn của bạn nhé ví dụ của mình sau khi upload sẽ là:

tiếp theo là các mã css cho từng đoạn văn bản để sử dụng đoạn mã font face trên. Cách làm như sau: Bạn vào website của mình cần chỉnh rồi vào vùng cần đổi font click phải chuột chọn inspect (đối với chrome)

thêm font face vào các mã nguồn
thêm font face vào các mã nguồn

sau đó bạn để ý các đoạn cho phần css đó, xong rồi chỉ việc quy ước thuộc tính font-family cho đoạn đó là cái font face kia là được.

Hy vọng các bạn là thành công, mọi phản hồi tới Nghiart.com xin vào trang liên hệ. Chúc thành công.