Hướng dẫn toàn diện về Font chữ trên WordPress cho người mới

Bạn đã biết gì về Font chữ trên Website WordPress của bạn chưa?

Nếu bạn không phải người thích khám phá Web chắc chắn nó rất xa lạ với bạn. Tuy nhiên nếu như bạn quan tâm về trải nghiệm người dùng trên Web bạn cần phải hiểu về Font chữ, nó khá thú vị đấy!

Vì vậ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 với các nội dung:

  • Font chữ WordPress 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, bắt đầu nào!

Chắc hẳn khi bạn học Microsoft Office ở trường trung học, bạn đã từng dùng đến Font chữ để thay đổi hiển thị các kiểu chữ khác nhau.

Cũng tương tự vậy.

  • Save

“Font chữ WordPress là định dạng hiển thị các kiểu chữ khác nhau dưới ánh mắt người truy cập web.”

- Nam Nguyen -

Hoặc bạn có thể hiểu đơn giản, Font chữ dùng để thể hiện nét đẹp của các ký tự trên màn hình.

font-chu-la-gi
  • Save

Mỗi Font chữ luôn có một nét đặc trưng riêng như độ đậm, độ mềm mại, các đường cong,...của chữ.

Trên Web, một Font chữ đẹp sẽ giúp người dùng dễ đọc, đồng thời cũng làm đẹp nội dung của bạn.

Nhưng thực tế, không phải ai cũng biết cách tìm một Font tùy chỉnh theo ý thích, một số bạn sử dụng theme WordPress và để mặc định theo nó khiến giao diện trở nên khó nhìn.

Đó là lý do trong phần dưới đây mình sẽ hướng dẫn bạn thay đổi Font chữ WordPress một cách dễ dàng nhất.

Làm sao để tìm Font chữ cho Website?

Trước tiên để thêm Font chữ vào WordPress bạn cần chọn một Font bạn cảm thấy ưng ý và gắn bó với Website của bạn.

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, 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.

tim-font-tren-google-font
  • Save

Hãy chọn Font bạn thấy đẹp nhất và để phục vụ phần sau bạn hãy click vào Font đó.

nho-ten-font-chu
  • Save

Bây giờ bạn có thể tùy chỉnh kích thước chữ muốn xem và một số styles của Font đó. Bạn muốn cái nào áp dụng trên site hãy nhấn Select this style.

tuy-chinh-kich-thuoc-chu-va-chon-style
  • Save

Bây giờ bên góc phải màn hình sẽ thấy các mã về font chữ gồm: Một mã nhúng và một mã tùy chỉnh CSS.

ma-nhung-font-vs-css
  • Save

Bạn biết như vậy là được, mình sẽ hướng dẫn cách sử dụng chúng trong phần sau.

3 cách thay đổi Font chữ WordPress

Để bạn có nhiều lựa chọn áp dụng trên WordPress mình sẽ hướng dẫn bạn 3 cách khác nhau. 

Chúng được sắp xếp theo thứ tự từ đơn giản đến phức tạp một chút. Vì vậy khi áp dụng được một cách bạn hãy dừng lại và đến phần sau.

Cách 1: Thay đổi Font chữ WordPress bằng Customize của Theme

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.

customize-font
  • Save

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. 

Ví dụ: Mục Typography của Astra Theme.

chon-photograpy-tren-customizechon-photograpy-tren-customize
  • Save

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.

chon-font-family
  • Save

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: Thêm 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.

Nhớ lưu lại.

dan-ma-nhung-font-vao-header
  • Save

Tiếp đến chọn Customize và nhấp vào mục Additional CSS, và dán mã CSS đã lấy.

dan-ma-css-vao-additional-css
  • Save

Lúc này nếu muốn áp dụng cho toàn Website bạn hãy thêm một số đoạn code.

body{

Dán Code CSS của bạn

}

Hoặc nếu bạn muốn phần tử nào được áp dụng font thì có thể thay thế body. (Điều này cần bạn phải học một chút về CSS).

Vậy là giờ Website của bạn sẽ được áp dụng Font mới.

Thay đổi Font chữ WordPress trên Page Builder

Với các trình tạo trang WordPress hiện đại như ElementorDivi 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ể.

Mình 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.

tuy-chinh-font-tren-elementor-pro
  • Save

Các font chữ đẹp thường dùng trên WordPress

Nếu như bạn cảm thấy khó lựa chọn Font hoặc muốn tìm những Font thông dụng nhất thì mình sẽ gợi ý cho bạn một vài cái.

Bạn có thể tham khảo và hãy áp dụng trên WordPress nếu như bạn thích.

  • Arial
  • Roboto
  • Open Sans
  • Montserrat
  • Segoe UI

Đây là những Font mình thấy chúng khá đẹp và đặc biệt khi bạn dùng tiếng Việt cũng không bị vỡ Font.

Mẹo: Với các Font trên bạn nên điều chỉnh kích thước của nó ở khoảng 17px trở xuống.

Làm cách nào để tìm Font của một Website khác?

Vào một ngày đẹp trời khi bạn lướt Web và vô tình thấy một Website có Font chữ khá đẹp.

Vậy bây giờ bạn muốn copy & đem về Website của mình thì làm thế nào?

Rất đơn giản, mình sẽ chỉ cho bạn một mẹo.

Dùng máy tính của bạn mở Google Chrome lên và truy cập vào Website cần tìm Font.

Tiếp đó nhấn chuột phải vào một khu vực chữ và chọn Inspect (hoặc nhấn F12).

nhan-inspect
  • Save

Một bảng làm việc mới xuất hiện trên màn hình, bạn hãy click vào nút mũi tên nhỏ ở góc trên sao cho nó chuyển sang xanh.

click-vao-nut-mui-ten
  • Save

Giờ bạn hãy rê chuột vào bất kỳ chữ nào bạn muốn kiểm tra nó sẽ hiện ra tên font cho bạn.

ten-font-duoc-hien-thi
  • Save

Hoặc bạn có thể kéo xuống cùng tab style để xem qua mục font-family: [tên font];

xem-font-chu-qua-tab-style
  • Save

Giờ thì bạn chỉ việc quay lại bước thêm Font vào WordPress như ở bước đầu để áp dụng cho Website của bạn.

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.

Nếu bạn thích sự đơn giản, có lẽ lần đầu bạn rất ít dùng tới.

Tuy nhiên, khi bạn muốn xây dựng giao diện có trải nghiệm hoàn hảo hoặc các trang đích chuyển đổi cao chắc chắn Font chữ sẽ giúp ích rất nhiều cho bạn.

Bạn nghĩ sao về bài viết này cũng như Font chữ WordPress? 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.

  • Save
post_author; ?>

Nhận nội dung tốt nhất từ mình

Bao gồm các hướng dẫn WordPress, mẹo, công cụ & ưu đãi tốt nhất để phát triển doanh nghiệp trực tuyến của bạn.

>
Share via
Copy link