Bạn đã biết gì về Font chữ trên Website WordPress của bạn chưa?
1 trong những thành phần cực kì quan trọng đối với giao diện website của bạn chính là Font chữ, nó sẽ ảnh hưởng cực kì nhiều tới ấn tượng của người xem đối với website của bạn.
Vì vậy, hiểu biết về font chữ, hay xa hơn là Typography là không bao giờ thừa; kể cả nếu bạn không sử dụng cho website, thì bạn cũng sẽ có thể dùng những kiến thức này khi làm thiết kế, powerpoint thuyết trình, vân vân và mây mây.
Trong bài viết này mình sẽ hướng dẫn bạn một số kinh nghiệm về Font chữ WordPress mà mình tích lũy được, sau khi đọc bài viết này bạn sẽ hiểu rõ về:
- Font chữ là gì?
- Cách tùy chỉnh Font chữ WordPress
- Cách thêm Font khi WordPress không hỗ trợ
- Các Font chữ thường dùng trên WordPress
- Cách tìm font chữ của một Website bất kỳ
Okay, let’s start!
Font chữ là gì? Font khác gì với Typeface?
Typeface vs. Font
Typeface là một hệ thống bao gồm các kiểu chữ, và mỗi một kiểu chữ khác nhau là một typeface riêng biệt. Ví dụ như Arial là một kiểu chữ, Gill Sans là một kiểu chữ, Adobe Caslon Pro là một kiểu chữ v.v…
Font là một miêu tả cho typeface, như vậy nghĩa là sao? Chúng ta có thể lấy ví dụ cho dễ hiểu đó là Arial cỡ chữ 9pt là một font, Arial cỡ 12pt là một font, Arial in nghiêng (Arial Italic) là một font, v.v. Mỗi sự thay đổi dù là nhỏ của typeface là một font khác nhau.
Các loại font chữ
Có rất nhiều kiểu chữ, nhưng chúng chỉ được chia ra thành 5 nhóm chính đó là :
- Serif
- San Serif
- Monoface
- Script
- Fantasy Decoration
Chúng ta sẽ chỉ cần quan tâm 2 loại phổ biến nhất, đó là Serif và San Serif, các loại còn lại khi nào bạn học về design thì có thể tìm hiểu thêm sau.
Chỉ cần nhìn vào hình minh hoạt ở trên, bạn có thể hiểu được sự khác nhau của 2 loại này.
Nói đơn giản, Serif là font có chân, Sans Serif là font không chân.
Serif: Thường mang theo vẻ cổ điển, và thường thích hợp cho những project mang tính truyền thống. Ngoài ra nó rất phổ biến trong các ẩn phẩm in ấn, hay báo chí. Font Serif nổi tiếng nhất mà ai ai chắc cũng biết đó là Times New Roman.
San serif: từ này nguồn gốc từ Latin, nghĩa là “without serif ~ không có chân”.
Loại font này hiện đã cực kì phổ biến và quen thuộc với chúng ta rồi, những font mang tính thương hiệu như Arial, Helvetica, hay hiện đại hơn là Futura, Montserrat,…
Ưu điểm của các font sans serif là nó dễ đọc, và thích hợp để hiển thị trên các thiết bị điện tử hơn đàn anh serif, ngoài ra vì mang theo vẻ trẻ trung nên hiện nay người ta ưa dùng hơn.
Làm sao để tìm Font chữ cho Website?
Thông thường để làm điều này bạn tìm một thư viện Font trực tuyến. Có 2 nơi mình khuyên bạn nên dùng là Google Fonts hoặc Typekit (hay còn gọi là hệ thống font của Adobe).
Ví dụ dưới đây mình dùng Google Fonts để tìm font chữ.
Bạn nên nhập một vài từ cần kiểm tra để thấy được các nội dung hiển thị trước; mục đích là để check xem font đó có hỗ trợ tiếng việt không, vì không phải tất cả font đều có hỗ trợ tiếng việt.
Sau đó, bạn chọn style theo mong muốn của mình bằng cách click vào dấu cộng, kết quả sẽ được như hình dưới.
Phần mình khoanh đỏ sẽ dùng khi bạn muốn cài font bằng phương pháp thủ công.
3 cách chỉnh Font chữ cho website WordPress
Cách 1: Thay đổi Font bằng Theme Customize
Cách này dễ nhất và mình khuyên bạn nên áp dụng nếu bạn không rành về kỹ thuật.
Hầu hết mọi theme WordPress hiện nay đều tích hợp Google Fonts trong trình chỉnh sửa Customize.
Sau đó bạn hãy tìm mục Typography, nơi này sẽ có các tùy chỉnh font trên WordPress của bạn. Tùy thuộc vào theme mà vị trí của mục này sẽ khác nhau.
Giờ hãy click vào mục Family để mở ra danh sách Font của Google.
Hãy điền tên Font bạn đã chọn khi xem ở danh sách trên.
Ví dụ mình chọn Font “Open Sans”.
Thay đổi sẽ được áp dụng cho bạn xem trước ngay lập tức trên màn hình.
Nếu vừa ý bạn hãy nhấn Publish để lưu lại thay đổi của bạn.
Cách 2: Thay đổi Font thủ công
Trong trường hợp Theme WordPress của bạn không hỗ trợ tùy chỉnh Font thì bạn hãy thêm theo cách thủ công.
Đầu tiên bạn cần biết cách chèn code vào Header & Footer WordPress.
Khi đến giao diện chèn code bạn hãy chọn dán vào mục Header.
Tiếp theo bạn hãy dán mã nhúng đã có trong phần trên dán vào đây. Sau đó lưu lại.
Tiếp đến chọn Customize và nhấp vào mục Additional CSS, và dán mã CSS đã lấy.
Copy và dán mã CSS của font
body{
Dán Code CSS của bạn
}
Cách 3: Thay đổi Font bằng Page Builder Elementor
Với các trình tạo trang WordPress hiện đại như Elementor, Divi Builder, Beaver Builder, Themify, tagDiv,…nó luôn có một khu vực tùy chỉnh Font chữ trong các thiết kế có văn bản.
Bạn chỉ cần click vào thiết kế cần thay đổi font sau đó tìm trong bảng cấu hình.
Do mỗi Page builder có cách tổ chức khác nhau nên mình khó chỉ cụ thể. Tuy nhiên mình chắc chắn sẽ có một mục “Typography” cho bạn chỉnh sửa.
Ví dụ dưới đây là khu vực tùy chỉnh font của một đối tượng trên trình tạo trang Elementor.
Với các trình tạo trang WordPress hiện đại như Elementor, Divi Builder, Webflow,…luôn có một khu vực tùy chỉnh Font chữ trong các thiết kế có văn bản.
Bạn chỉ cần click vào thiết kế cần thay đổi font sau đó tìm trong bảng cấu hình.
Do mỗi Page builder có cách tổ chức khác nhau nên mình khó chỉ cụ thể. Tuy nhiên mình chắc chắn sẽ có một mục “Typography” cho bạn chỉnh sửa.
Ví dụ dưới đây là khu vực tùy chỉnh font của một đối tượng trên trình tạo trang Elementor.
Về chi tiết cách sử dụng Elementor, mình đã có viết hướng dẫn ở đây.
Các font chữ đẹp thường dùng trên WordPress
Để chọn được font ưng ý, bạn nên dành nhiều thời gian ra để test tới khi chọn được option tối ưu nhất cho bản thân mình. Một số font phổ biến bạn có thể thử là:
- Roboto
- Open Sans
- Montserrat
- Segoe UI
- Noto
Ở dưới là 1 số hình preview khi mình test font cho website của mình, bạn có thể xem qua để thấy sự khác biệt.
Làm cách nào để tìm Font của một Website khác?
Khi mà đọc bài viết trên 1 trang web, hoặc bạn đang trong quá trình research để chọn ra font mà mình ưng ý. Thì hẳn bạn đã gặp tình cảnh bứt rứt khi thấy được font nhìn ưng cái bụng nhưng không biết nó là gì.
Thời gian rồi mình vừa tìm được 1 addon cho chrome tên là Whatfont, bạn có thể tải nó ở link này, sau đó bấm “Add to Chrome” là được.
Cách sử dụng cũng cực kì đơn giản, bạn mở 1 trang web bất kì, sau đó bạn click vào icon Whatfont trên thanh Extension của Chrome, và tiếp đó di chuột vào 1 đoạn text mà bạn muốn xác định, Whatfont sẽ cho bạn biết font đó là gì.
Hình dưới là mình demo bạn các bạn xem từ trang https://vnexpress.net/, title là font Merriweather, còn body text là Arial.
Lời kết
Hy vọng qua bài viết này bạn đã biết được nhiều hơn về Font chữ trên WordPress cũng như cách thay đổi nó trong trường hợp cần thiết.
Việc sử dụng font rất quan trọng, nhất là trong thiết kế. Mình là 1 người rất thích về Typography nên mình sẽ dành thời gian ra để viết hẳn 1 series về Typo trong thời gian tới, các bạn đón đọc nhé.
Bạn nghĩ sao về bài viết này cũng như Font chữ? Cho mình biết ý kiến trong comment dưới, mình sẽ phản hồi sớm nhất cho bạn.
