Thay đổi phông chữ ( Font ) trong WordPress Bằng CSS

Có một số cách để thay đổi phông chữ trong WordPress. Một mặt, có thể định dạng các khối văn bản hoặc các phần riêng lẻ trong trình chỉnh sửa. Điều này rất dễ dàng, nhưng sẽ sớm dẫn đến sự xuất hiện không nhất quán về lâu dài.

Tốt hơn là xác định phông chữ cho toàn bộ trang web trong chủ đề. Bằng cách này, một thiết kế nhất quán và hấp dẫn được duy trì. Tuy nhiên, bạn cần có quyền quản trị viên và một chút kiến ​​thức chuyên môn để thực hiện các thay đổi. Chúng tôi sẽ hướng dẫn bạn cách thay đổi phông chữ WordPress tốt nhất.

Thay đổi phông chữ trong WordPress

Hãy xem xét trường hợp đơn giản nhất của việc thay đổi phông chữ cho một trang web WordPress hiện có. Thông thường, chủ đề đặt một phông chữ cho tất cả văn bản. Hãy giả sử nó là một đặc tả sans-serif chung chung. Bây giờ chúng ta muốn thay đổi các tiêu đề thành một phông chữ serif . Trong WordPress, điều này yêu cầu hai bước:

• Xác định phông chữ cho các phần tử HTML trong CSS
• Bao gồm mã CSS trong WordPress

Để xác định phông chữ cho một phần tử HTML, chúng tôi sử dụng thuộc tính CSS “font-family”. “@ Font-face” có liên quan được sử dụng để xác định phông chữ tùy chỉnh.

Đặc tả CSS	Giải trình	Thí dụ
font-family	Đặt phông chữ	body {font-family: ‘my-custom-font’, sans-serif; }
@mặt chữ	Xác định phông chữ tùy chỉnh	@ font-face {font-family: ‘my-custom-font’; src: local (‘my-custom-font.woff2’;}

Chỉ định phông chữ cho một phần tử HTML trong CSS?

Đầu tiên, hãy xem cách đặt phông chữ cho một phần tử HTML trong CSS. Ví dụ của chúng tôi, chúng tôi muốn sử dụng phông chữ serif cho các tiêu đề H1 đến H6 . Chúng tôi sử dụng mã sau:

h1, h2, h3, h4, h5, h6 {
font-family: serif;
}

Làm thế nào để bao gồm CSS bổ sung trong WordPress?

Có nhiều phương pháp khác nhau để tích hợp CSS bổ sung vào WordPress. Việc sử dụng chính xác tùy thuộc vào cách chủ đề được xây dựng. Các chủ đề thương mại và trình tạo trang thường cung cấp cài đặt tùy chỉnh để bao gồm CSS bổ sung. Chúng tôi sẽ hiển thị hai phương pháp phổ biến hoạt động với hầu hết các chủ đề tuân thủ tiêu chuẩn:

Sử dụng WordPress Customizer để bao gồm CSS bổ sung; minh họa bằng ảnh chụp màn hình.

Bao gồm CSS bổ sung thông qua tệp functions.php , lý tưởng là trong một chủ đề con ; quy trình cụ thể được mô tả trong hướng dẫn chỉnh sửa tiêu đề WordPress của chúng tôi .

Đầu tiên, chúng tôi điều hướng đến WordPress Customizer.

Tiếp theo, chúng tôi nhấp vào “CSS bổ sung”.

Chúng tôi sẽ dán mã CSS của mình vào. Trong bản xem trước ở bên phải, chú thích được hiển thị chính xác bằng Serif.

Làm thế nào để thêm một phông chữ khác trong WordPress?

Để thêm một phông chữ vào một trang web, một webfont là cần thiết. Điều này có thể được lấy trực tiếp từ Google Fonts hoặc một nền tảng tương tự. 

Để làm điều này, chỉ cần bao gồm một biểu định kiểu bổ sung do Google lưu trữ trong WordPress là đủ. Tuy nhiên, có thể có những lo ngại về quyền riêng tư với điều này. 

Tùy thuộc vào phương pháp được sử dụng để nhúng phông chữ web, hiệu suất trang web có thể bị ảnh hưởng. Do đó, thường nên lưu trữ các phông chữ web như một phần của thư mục chủ đề trên máy chủ WordPress .

Ghi chú

Webfonts được bao gồm trong một trang web yêu cầu một biểu định kiểu đặc biệt ngoài các tệp phông chữ. Các nền tảng như Google Fonts  cung cấp bảng định kiểu và tệp phông chữ để tải xuống cũng như nhúng vào trang web . Điều này rất tiện lợi, nhưng việc sử dụng tối ưu cần có kiến ​​thức nền tảng và cách tiếp cận cụ thể. Điều này là do mỗi phông chữ bổ sung được tải xuống bởi trình duyệt và “chi phí” tương ứng.

Làm thế nào để tự lưu trữ Font chữ như phần của WordPress?

Tự mình lưu trữ phông chữ web nói thì dễ hơn làm. Cách tốt nhất là sử dụng một công cụ chuyên dụng tạo tất cả các định dạng phông chữ web phổ biến từ các tệp phông chữ được tải lên, bao gồm cả mã CSS cần thiết. 

Trong nhiều năm, Font Squirrel đã tự thiết lập mình là tiêu chuẩn. Ngoài ra, bạn có thể sử dụng một plugin như Use Any Font để thêm phông chữ vào WordPress.

Font Squirrel

Tải lên các tệp phông chữ bạn muốn sử dụng. Lưu ý rằng việc đưa vào một phông chữ phải được giấy phép cho phép một cách rõ ràng. / Nguồn: https://www.fontsquirrel.com/tools/webfont-generator

Từ các tệp phông chữ đã tải lên, một bộ công cụ webfont được tạo ra để tải xuống. Điều này phải được tích hợp vào chủ đề. / Nguồn: https://www.fontsquirrel.com/tools/webfont-generator

Sử dụng bất kỳ phông chữ nào

Sau khi cài đặt và kích hoạt, hãy điều hướng đến plugin “Sử dụng bất kỳ phông chữ nào” trong trang tổng quan.

Đầu tiên, hãy tạo một khóa API thử nghiệm.

Trong tab “Tải lên Phông chữ”, bạn có thể thêm phông chữ được xác định trước vào trang web WordPress. Chúng tôi lọc “IBM Plex” làm ví dụ.

Các phông chữ được thêm vào sẽ được hiển thị.

Trong “Gán phông chữ”, chọn các phần tử HTML bạn muốn và chỉ định phông chữ. Phía sau, câu lệnh CSS “@ font-face” tương ứng được tạo.

Các phần tử đã được gán một phông chữ sẽ được hiển thị.

Một thử nghiệm đầu tiên cho thấy rằng plugin hoạt động. Dòng tiêu đề được hiển thị bằng phông chữ “IBM Plex Mono Light”.

Tất cả về Phông chữ Biểu tượng là gì?

Bên cạnh các phông chữ web để hiển thị văn bản, còn có các phông chữ biểu tượng phổ biến. Các glyphs của một phông chữ không nhất thiết phải đại diện cho các chữ cái .

Các vectơ mà chúng chứa chỉ đơn giản là các hình dạng được xác định bằng toán học. Bằng cách này, bạn cũng có thể hiển thị các biểu tượng thường được sử dụng cho mạng xã hội chẳng hạn.

Các biểu tượng thương hiệu của Phông chữ Biểu tượng “FontAwesome” phổ biến. / Nguồn: https://fontawesome.com/v6.0/icons/?m=free&s=brands

Ghi chú

Thận trọng: Không nên nhầm lẫn Biểu tượng Phông chữ với Biểu tượng ưa thích của một trang web.

Sử dụng một Font Web từ Google Fonts trong WordPress?

Trong hầu hết các trường hợp, bạn nên tự lưu trữ phông chữ web. Tuy nhiên, vẫn có những trường hợp ngoại lệ. Có lẽ đó chỉ là vấn đề của việc thử một phông chữ mới trên một trang web dàn dựng . Hoặc trang web được đề cập là một blog nhỏ, nơi hiệu suất không quá quan trọng. Vì vậy, chúng tôi hiển thị thủ tục bắt buộc ở đây vì lợi ích của sự hoàn chỉnh.

Để thêm phông chữ từ Google Fonts vào WordPress , hãy làm theo các bước sau:

Chọn phông chữ mong muốn từ Google Phông chữ: Sử dụng chức năng tìm kiếm và bộ lọc hoặc tự bạn thực hiện.
Chọn các biến thể kiểu riêng lẻ: Hãy nhớ rằng mỗi biến thể kiểu bổ sung sẽ khiến bạn tải xuống một tệp phông chữ khác.
Đặt mã biểu định kiểu trong tiêu đề WordPress - như đã giải thích trong hướng dẫn của chúng tôi về cách chỉnh sửa tiêu đề WordPress.
Đặt phông chữ qua CSS - cho toàn bộ trang web hoặc cho các phần tử riêng lẻ.

Chúng tôi đã chọn phông chữ sans-serif “IBM Plex Sans” từ họ phông chữ “IBM Plex”. / Nguồn: https://fonts.google.com/

Tiếp theo, chúng tôi chọn hai biến thể kiểu của họ phông chữ “IBM Plex Sans”. Chúng tôi sao chép mã biểu định kiểu được tìm thấy tại <link>. / Nguồn: https://fonts.google.com/

Cuối cùng nhưng không kém phần quan trọng, chúng tôi dán mã biểu định kiểu vào tiêu đề WordPress. Trong ví dụ của chúng tôi, chúng tôi đã sử dụng một plugin cho việc này.

Bottom of Form

Cách nào có thể được dùng để bao gồm Font web trong WordPress?

Để tóm tắt, chúng tôi chỉ ra các phương pháp phổ biến có thể được sử dụng để thêm phông chữ vào WordPress. Tất cả những điều này đều có ưu và nhược điểm riêng:

Nhúng webfont	Thuận lợi	Bất lợi
Sử dụng câu lệnh CSS @import	Đơn giản, được hỗ trợ bởi Google Fonts; chỉ yêu cầu quyền truy cập vào biểu định kiểu.	Không tốt cho hiệu suất của trang web; có thể ngăn việc tải song song các bảng định kiểu.
Bao gồm CSS thông qua <link rel = “stylesheet”>.	Đơn giản, được hỗ trợ bởi Google Fonts; chỉ yêu cầu quyền truy cập vào tiêu đề WordPress; có thể có lợi cho hiệu suất của trang web nếu biểu định kiểu bên ngoài được truy xuất từ ​​bộ nhớ cache.	Yêu cầu quyền truy cập vào chủ đề hoặc tiêu đề WordPress; có thể không tốt cho hiệu suất trang web vì biểu định kiểu được tải dưới dạng tài nguyên riêng biệt.
Sử dụng plugin webfont	Giản dị; hoạt động từ bảng điều khiển WordPress; hoạt động với các phông chữ không được lưu trữ công khai.	Yêu cầu cài đặt một plugin khác; ít kiểm soát hơn so với phương pháp thủ công và trình tạo webfont.
Bao gồm CSS thông qua wp_enqueue_style ().	Hiệu suất trang web tốt hơn vì các bảng định kiểu được thu nhỏ và nối với nhau.	Yêu cầu quyền truy cập vào chủ đề hoặc functions.php.
Xác định quy tắc CSS @ font-face	Mức độ kiểm soát lớn, bao gồm cả sửa chữa FOUT.	Yêu cầu kiến ​​thức đặc biệt.
Tạo webfont bằng trình tạo và tích hợp vào chủ đề.	Làm việc với các phông chữ không được lưu trữ công khai; mức độ kiểm soát lớn nhất đối với các tệp phông chữ được tạo và quy tắc @ font-face.	Các tệp đã tạo phải được tích hợp vào chủ đề và được tùy chỉnh nếu cần thiết; yêu cầu kiến ​​thức đặc biệt.

Làm thế nào để tùy chỉnh phông chữ trong WordPress?

Cho đến nay chúng ta đã thảo luận về cách thay đổi phông chữ trong WordPress. Bây giờ chúng ta hãy xem cách thay đổi kích thước phông chữ và màu phông chữ trong WordPress. Về cơ bản, chúng tôi đang sử dụng cùng một quy trình mà chúng tôi đã sử dụng để thay đổi phông chữ trong WordPress:

Xác định vị trí phần tử mục tiêu và xác định bộ chọn.

Quy tắc CSS nguyên mẫu trong trình kiểm tra web

Bao gồm các thông số kỹ thuật CSS trong WordPress

Tổng quan về các thông số kỹ thuật CSS quan trọng nhất để thay đổi kích thước phông chữ và màu phông chữ trong WordPress:

Đặc tả CSS	Giải trình	Thí dụ
cỡ chữ	Đặt kích thước phông chữ	p {font-size: 1rem; }
font-weight	Đặt font-weight	strong {font-weight: bold; }
màu sắc	Đặt màu phông chữ	a {color: blue; }

Cách thay đổi cỡ chữ trong wordpress

Hãy xem xét lại trường hợp đơn giản nhất: Chúng tôi muốn thay đổi kích thước phông chữ của toàn bộ trang web trong WordPress . Để làm điều này, chúng tôi sử dụng phần tử gốc HTML làm bộ chọn với tỷ lệ phần trăm cho kích thước phông chữ. Điều này làm cho nó trực quan để hiểu cách thay đổi kích thước:

“Làm cho phông chữ lớn hơn 10%”: html {font-size: 110%; }
“Hiển thị phông chữ nhỏ hơn 10%”: html {font-size: 90%; }

Bây giờ, làm thế nào để điều chỉnh kích thước phông chữ của các phần tử nhất định ? Một lần nữa, hãy lấy tiêu đề H1 đến H6 làm ví dụ. Đầu tiên, hãy xem cách KHÔNG làm điều đó :

h1 { font-size: 35px; }
h2 { font-size: 28px; }
h3 { font-size: 25px; }
h4 { font-size: 21px; }
h5 { font-size: 18px; }
h6 { font-size: 15px; }

Có hai điều sai ở đây: Thứ nhất, pixel (“px”) được sử dụng như một đơn vị tuyệt đối. Thứ hai, kích thước phông chữ cá nhân được chọn tùy ý. Cái thứ hai dẫn đến một thiết kế trông không nhất quán và lộn xộn. Thật không may, cả hai “chống mẫu” đều có thể được tìm thấy trong nhiều chủ đề WordPress – ngay cả thương mại -. 

Tốt hơn là sử dụng các đơn vị tương đối cho đặc điểm kỹ thuật của kích thước phông chữ . Với đơn vị “rem”, các thông số kỹ thuật về kích thước đề cập đến phần tử gốc HTML. Theo đó, một đặc điểm kỹ thuật của “2rem” có nghĩa là: “gấp đôi kích thước phông chữ bình thường”.

Sự kết hợp giữa tỷ lệ phần trăm cho phần tử gốc HTML và phần còn lại cho tất cả các phần tử văn bản khác là hoàn hảo cho thiết kế đáp ứng . Tất cả những gì bạn cần là một số Truy vấn Phương tiện CSS cho các độ rộng màn hình khác nhau để điều chỉnh kích thước phông chữ của phần tử gốc HTML. Tất cả các phần tử văn bản khác sẽ tự động thay đổi tỷ lệ với nó, giữ tỷ lệ của chúng với nhau:

/* Mobile-first font size */
html { font-size: 100%; }
/* 'medium' Breakpoint */
@media screen and (min-width: 30em) and (max-width: 60em) {
html { font-size: 105%; }
}
/* 'large' Breakpoint */
@media screen and (min-width: 60em) {
html { font-size: 110%; }
}

Câu hỏi vẫn còn, tùy theo quyết định mà người ta chọn các giá trị kích thước của các phần tử văn bản riêng lẻ . Như đã đề cập ở trên, không phải là một ý kiến ​​hay nếu bạn chọn các giá trị tùy ý. Một cách tiếp cận tốt là sử dụng “thang đo kiểu chữ”. Các thang đo kiểu chữ được lấy cảm hứng từ sự hòa âm của âm nhạc và dựa trên các công thức toán học như tỷ lệ vàng. Kích thước phông chữ so le theo tỷ lệ kiểu chữ thể hiện một vẻ ngoài hài hòa. Thuận tiện, các trình tạo tự động tạo mã CSS cần thiết, có sẵn trực tuyến. Ở đây chúng tôi sử dụng quy mô đánh máy của khung “Tachyons” làm ví dụ:
h1 { font-size: 3rem; }
h2 { font-size: 2.25rem; }
h3 { font-size: 1.5rem; }
h4 { font-size: 1.25rem; }
h5 { font-size: 1rem; }
h6 { font-size: .875rem; }

Quy mô typographic của khung “Tachyons” tạo ra một ấn tượng hài hòa. / Nguồn: https://tachyons.io/#style

Làm cách nào để thay đổi màu Font trong WordPress?

Có thể bạn đã đoán ra: Để thay đổi màu phông chữ trong WordPress, chúng ta không chỉ chọn tất cả văn bản trên một trang và sau đó chọn một màu mới từ menu. 

Thay vào đó, chúng tôi tiến hành tương tự với phông chữ và đặt màu thông qua mã CSS . Điển hình cho CSS là có một số phương pháp để đạt được một kết quả mong muốn. 

Chúng tôi không thể đi vào chi tiết ở đây về tất cả các cách xác định thông số kỹ thuật màu trong CSS. Các quy tắc CSS sau đây là tương đương:

body {
color: black;
color: #000000;
color: #000;
color: rgb(0, 0, 0)
}

Như bạn có thể thấy, để đặt màu phông chữ cho toàn bộ trang web, chúng tôi sử dụng phần tử nội dung HTML với thuộc tính CSS “color”. Tất cả các yếu tố văn bản khác kế thừa từ nó. Nếu cần, chúng tôi ghi đè giá trị màu kế thừa cho các lớp phần tử cụ thể. Ví dụ: để hiển thị các tiêu đề bằng màu xám đậm, chúng tôi sử dụng mã sau:
h1, h2, h3, h4, h5, h6 {
color: #555555;
}

Màu phông chữ, giống như kiểu phông chữ, là một yếu tố thiết kế cần thiết. Màu sắc truyền tải cảm xúc đến một mức độ đặc biệt. Do đó, điều quan trọng là phải nhất quán và không sử dụng quá nhiều màu trên một trang . Cách phối màu không nhất quán hoặc kém phối hợp có tác động đáng lo ngại và có thể khiến khách truy cập trang sợ hãi. Khi nghi ngờ: Ít hơn là nhiều hơn.

Để có khả năng sử dụng tốt hơn, điều cần thiết là phải đảm bảo tỷ lệ tương phản đủ cao. Chỉ khi đó, các văn bản mới có thể đọc được một cách dễ dàng. 

May mắn thay, các giá trị tương phản có thể được tính toán cho sự kết hợp của văn bản và màu nền . Khung Tachyons đã được đề cập đi kèm với một bảng màu trưởng thành bao gồm một số kết hợp có độ tương phản cao. Nếu bạn sao chép các giá trị màu phù hợp từ đó cho trang web WordPress của riêng mình, bạn không thể làm sai.

Tùy thuộc vào trình chỉnh sửa được sử dụng, có thể thay đổi màu chữ trong WordPress mà không cần sử dụng CSS. Điều này thường nhanh chóng dẫn đến sự xuất hiện không nhất quán và do đó không phải là một ý kiến ​​hay. Trình soạn thảo Gutenberg hiện đại cung cấp một nền tảng trung gian khả thi. 

Gutenberg có một bảng màu được xác định trước có thể được điều chỉnh cho phù hợp với bảng màu của chủ đề. Nếu bạn gán một trong những màu văn bản được xác định trước cho một khối, trình chỉnh sửa chỉ thêm một vài lớp CSS. Bằng cách này, sự tách biệt của các chủ đề được giữ nguyên; nếu cần, các lớp có thể được ghi đè hoặc tắt tiếng sau đó.

Tuy nhiên, Gutenberg cũng cho phép bạn gán một “màu riêng lẻ” cho các phần văn bản riêng lẻ. Điều này nên được tránh bằng mọi giá . Thay vì tên lớp được xác định trước, Gutenberg chèn màu riêng lẻ dưới dạng giá trị màu mã cứng cho mỗi kiểu nội tuyến vào mã HTML. Được hiển thị ở đây như một ví dụ:

<span style="color:#38a300" class="has-inline-color">I live in Los Angeles, have a great dog named Jack, and I like pi&#xF1;a coladas</span>

Các kiểu nội tuyến có tính đặc hiệu CSS cao nhất và do đó tồn tại lâu dài trong các thiết kế lại sau này. Do đó, bạn nên tắt các màu tùy chỉnh trong trình chỉnh sửa. Để thực hiện việc này, chúng tôi nhập mã sau vào tệp functions.php của chủ đề con của chúng tôi:

function disable_gutenberg_custom_color_picker() {
add_theme_support( 'disable-custom-colors' );
}
add_action( 'after_setup_theme', 'disable_gutenberg_custom_color_picker' );

Ngoài ra, bảng màu Gutenberg có thể bị vô hiệu hóa hoàn toàn . Một lần nữa, chúng tôi sử dụng tệp functions.php:

function disable_gutenberg_custom_color_palette() {
add_theme_support( 'editor-color-palette' );
}
add_action( 'after_setup_theme', 'disable_gutenberg_custom_color_palette' );

Kết luận

Cách tối ưu để thay đổi phông chữ trong WordPress là thay đổi cài đặt phông chữ trên toàn cầu thông qua CSS . Tốt nhất là sử dụng các ngăn xếp phông chữ CSS được tiêu chuẩn hóa. Nếu cần một phông chữ web tùy chỉnh, chúng tôi khuyên bạn nên giảm thiểu số lượng các biến thể kiểu. 

Nếu phông chữ mong muốn có sẵn dưới dạng phông chữ có thể thay đổi, điều này nên được ưu tiên. Để kiểm soát tối đa, hãy tự lưu trữ phông chữ và sử dụng trình tạo phông chữ web.

Nếu bạn muốn thay đổi kích thước phông chữ và màu phông chữ trong WordPress, trình chỉnh sửa Gutenberg cung cấp một sự thỏa hiệp tốt . Với điều kiện là các kích thước và màu sắc phông chữ riêng lẻ đã bị vô hiệu hóa thông qua cấu hình chủ đề, các giá trị được xác định trước có thể được sử dụng khá dễ dàng.