Cách chỉnh sửa Font chữ trong WordPress

Cập nhật: 18/06/2019

Bài viết sau sẽ hướng dẫn cách chỉnh sửa Font chữ cho bài viết và những thành phần khác trong WordPress

Phần 1. Cách chỉnh sửa Font chữ bài viết

Bước 1. Mở rộng tính năng cho bộ soạn thảo WordPress

Bước 2. Mở bài viết cần sửa Font chữ. Bạn sẽ thấy trình soạn thảo có thêm rất nhiều mục nữa như Tệp tin, Chỉnh sửa, Xem, Chèn, Định dạng, Bảng..và thanh công cụ Font chữ, Cỡ chữ, Thụt dòng….

bo-soan-thao-wordpress-2

Bước 3. Bôi đen chữ, câu văn hoặc đoạn văn muốn thay đổi font chữ, bấm vào dấu mũi tên trỏ xuống bên phải chữ Arial ở thanh công cụ

sua-font-chu-bai-viet-wordpress-1

Bước 4. Chọn Font chữ bạn muốn

sua-font-chu-bai-viet-wordpress-2

Bước 5. Lưu lại bài viết. Xong

Phần 2. Cách chỉnh sửa Font chữ phần khác

Cấu trúc website được tạo thành bởi nhiều thẻ HTML như h1, h2, h3, h4, h5, p, strong, quote….

Để đổi Font chữ, chúng ta chỉ cần đổi thuộc tính Font của các thẻ này. Với bạn biết HTML/CSS thì điều này dễ rồi.

Tuy nhiên, nếu bạn không biết, cũng không sao, Easy Google Fonts sẽ giúp giải quyết điều đó.

Cài đặt và Kích hoạt plugin Easy Google Fonts

easy-google-fonts-1-min

easy-google-fonts-2-min

Sau khi Kích hoạt, WordPress sẽ tự động thêm Typography vào trình Tùy biến

tuy-bien-wp-1tuy-bien-wp-2tuy-bien-wp-3

Với các lựa chọn chỉnh Font chữ cho Paragraph (thẻ p, đoạn văn) và Heading 1 tới Heading 6 (thẻ H1 tới H6)

tuy-bien-wp-4

Bạn muốn sửa phần nào, chỉ cần bấm vào Edit Font ở vị trí tương ứng.

tuy-bien-wp-5

Trong đó:

Styles

  • Scripts/Subset: Chọn kiểu ngôn ngữ, Vietnamese
  • Font Family: Tên font, rất nhiều như Roboto, Open Sans, Source Sans Pro,…
  • Font Weight: Độ đậm, nghiêng, với các giá trị 300, 400, 500, 600, 700
  • Text Decoration: Underline (Gạch dưới), Line-through (gạch giữa), Overline (gạch trên đầu) và None (không có gì)
  • Text Transform: Uppercase (In hoa tất cả), Capitalize (in hoa kí tự đầu của các từ), Lowercase (chữ thường)

Appereance

  • Font Color: Màu chữ
  • Background Color: Màu nền của thẻ
  • Font Size: Kích cỡ, tính theo px
  • Line-height: Chiều cao thẻ
  • Letter Spacing: Khoảng cách các kí tự

Positoning (Phần này không biết về CSS thì hơi khó hiểu chút)

  • Margin: khoảng cách thẻ này và thẻ khác
  • Padding: khoảng cách chữ và viền của nó
  • Border: Viền
  • Border Radius: Độ cong
  • Display: Block (mỗi thẻ chiếm 1 hàng) – Inline-block (nhiều thẻ có thể nằm trên 1 hàng)

Bên phải nó hiển thị Demo Website, bạn có thể vừa điều chỉnh vừa xem xét hiển thị luôn, khá trực quan, nên dù mấy cái trên có khó hiểu, bạn chỉnh sửa là sẽ hiểu ngay.