Hướng dẫn thay đổi phông chữ trong WordPress

Mục lục

Phông chữ (Fonts) có thể tạo ra sự khác biệt giữ một trang web đơn điệu và tinh tế. Bằng cách thay đổi phông chữ, bạn có thể khiến cho website của mình trở nên hiện đại, chuyên nghiệp hơn.

Nhưng đâu là cách để chọn được Font chữ tốt nhất cho WordPress site? Và làm thế nào để chọn Font chữ phù hợp với WordPress Theme mà bạn đang dùng?

Trong bài viết này tôi sẽ chia sẻ những kiến thức về Font chữ trong WordPress.

Tìm hiểu về Fonts chữ

Chúng ta đã được nghe nhiều về thuật ngữ Font chữ. Nếu bạn thường xuyên sử dụng phần mềm soạn thảo văn bảo Microsoft Word thì hẳn sẽ không còn xa lại gì đối với thuật ngữ này.

Tuy nhiên Font chữ chúng ta tìm hiểu ở đây là Font chữ trên nền web. Nó được lưu trữ trên website của bên thứ ba, họ tạo ra các Font chữ và nó được chèn vào website của bạn. Một Font chữ tối ưu là ngoài tính thẩm mỹ ra nó còn đảm bảo tất cả các thiết bị đều có thể đọc và hiển thị được.

Cách thêm Font chữ vào WordPress site

Trước khi tìm hiểu cách thêm Fonts chữ cho WordPress site, sẽ rất hữu ích nếu bạn tìm hiểu các tùy chọn có sẵn dành cho mình.

Font chữ là một phần của việc thiết kế trang web. Đa số Font chữ đều được mã hóa trong tập tin style.css. Đó là phần lớn chứ không phải tất cả. Trong một số trường hợp bạn có thể quyết định sử dụng plugin để tăng cường phạm vi phông chữ trên website của mình.

Dưới đây là một số tùy chọn có sẵn dành cho bạn:

  • Sử dụng web fonts như Google Fonts. Bạn có thể truy cập vào nó bằng cách cài đặt một plugin.
  • Sử dụng web fonts và mã hóa chúng vào WordPress Theme mà bạn đang dùng.
  • Lưu trữ Fonts chữ bạn tạo lên website của mình và thêm chúng vào WordPress Theme.

Cho dù bạn sử dụng web fonts hay fonts chữ do mình upload lên thì mỗi cách đều có một ưu, nhược điểm riêng. Chúng ta sẽ đi tìm hiểu ở phần sau của bài viết.

Trước tiên chúng ta cùng tìm hiểu về web fonts: tại sao bạn chọn sử dụng chúng và làm thế nào để thêm nó vào WordPress site.

Sử dụng web fonts trong WordPress

Web fonts là cách hay dùng nhất để thêm fonts chữ vào WordPress site của bạn. Nó có thể giúp bạn thêm hàng loạt phông chữ một cách dễ dàng.

Web fonts là gì?

Web fonts là các phông chữ được cung cấp bởi bên thứ ba. Thay vì sao chép các fonts chữ vào website của mình, bạn chỉ cần liên kết đến chúng. Và các fonts chữ này sẽ hiển thị trên website của bạn.

Điều này có nghĩa là bạn có thể truy cập vào rất nhiều fonts chữ nhưng không làm ảnh hưởng đến không gian lưu trữ trên hosting của mình. Thay vì copy các tập tin này vào website của mình, bạn chỉ cần liên kết đến chúng.

Web fonts thường miễn phí, cũng có một số ít bạn phải trả phí. Một số nhà cung cấp web font nổi tiếng thường gặp là:

  • Google Fonts. Đây là nhà cung cấp web font lớn nhất hiện nay. Bạn có thể download tất cả các font của họ về máy tính của mình. Bạn có thể sử dụng các font giống như trên website của mình để tạo kiểu chữ cho các công việc khác như soạn thảo văn bản, đồ họa…Và tất cả đều miễn phí.
  • Adobe Edge Web Fonts. Đây cũng là một nhà cung cấp web font miễn phí. Nếu bạn là một nhà thiết kế, đang sử dụng các ứng dụng của Adobe thì đây là sự lựa chọn phù hợp nhất cho bạn.
  • Fonts.com. Đây là nhà cung cấp web font trả phí. Nó cung cấp các font phục vụ cho việc in ấn và các font chữ đặc biệt mà các nhà cung cấp miễn phí không hề có.
  • fontfabric Cung cấp các font cao cấp cho người dùng web font. Bạn sẽ phải trả phí để có thể sử dụng nó. Nhưng bạn sẽ có được sự cá nhân hóa cao mà các nhà cung cấp miễn phí khác không có.

Google Fonts

Để có thể sử dụng các font từ các nhà cung cấp liệt kê ở trên bạn cần thêm một đoạn mã vào WordPress site của mình hoặc sử dụng một plugin chuyên dụng.

Việc sử dụng các font chữ sáng tạo sẽ giúp website của bạn cá tính, mới lạ. Tuy nhiên để tránh tình trạng “bể font”, “mất chữ” bạn cần sử dụng các font phổ biến, đảm bảo sự an toàn. Tức là nó đều hiển thị được trên tất cả các thiết bị truy cập.

Tại sao lại dùng web fonts?

Bạn đã biết được web fonts là gì rồi. Giờ chúng ta hãy cùng tìm hiểu xem tại sao lại sử dụng web fonts thay vì sử dụng fonts trên hosting của mình.

Dưới đây là một số ưu điểm của việc sử dụng web fonts:

  • Đơn giản: Việc thêm một vài đoạn code hoặc cài đặt một plugin luôn dễ dàng và nhanh chóng hơn là tải về rồi upload fonts lên hosting. Và sau này nếu bạn muốn cập nhật, thay đổi fonts thì nó cũng dễ dàng và thuận lợi hơn rất nhiều.
  • Đa dạng: Có hàng ngàn fonts chữ trên internet. Và con số này không ngừng tăng lên từng ngày.
  • Cập nhật nhanh chóng: Nếu fonts cần được cập nhật, website của bạn có quyền truy cập vào phiên bản mới mà không cần phải thực hiện bất cứ điều gì quá phức tạp.

Rất nhiều website sử dụng web fonts (với một vài fonts an toàn được dự phòng). Và đối với WordPress, việc này cũng có thể được thực hiện một cách dễ dàng.

Tìm web fonts phù hợp cho website của bạn

Khi đã muốn sử dụng web fonts rồi thì câu hỏi tiếp theo của bạn có thể là: Tôi sẽ phải sử dụng fonts nào?

Nếu là trước đây, việc trả lời cho câu hỏi này khá là đơn giản. Bạn chỉ cần chọn fonts phổ biến, an toàn là được. Ví dụ như các fonts chữ thuộc gia đình serif font hoặc sans-serif. Tuy nhiên nó không được phong phú và đa dạng cho lắm.

Tuy nhiên giờ đây bạn có rất nhiều sự lựa chọn để sử dụng theo nhu cầu của mình.

Dưới đây là một số gợi ý giúp bạn có thể chọn được fonts phù hợp cho website của mình.

  • Tìm hiểu xem website của đối thủ sử dụng fonts gì. Tôi không khuyên bạn bắt chước rập khuôn đối thủ của mình. Nhưng bạn có thể tham khảo để chọn được phong cách phù hợp để truyền tải nội dung đến độc giả của mình.
  • Suy nghĩ xem loại tâm trạng, trạng thái cảm xúc nào bạn muốn nhờ fonts truyền tải. Một số fonts trông rất hiện đại, một số fonts lại có vẻ truyền thống. Một số fonts nhìn vui mắt, một số fonts lại nghiêm túc, chỉn chu.
  • Đảm bảo nội dung bài viết dễ đọc, tiêu đề nổi bật.
  • Hãy sử dụng các fonts phổ biến của Google. Nó rất dễ đọc và quen thuộc với nhiều người.

Sau khi bạn đã chọn được fonts phù hợp, hãy dành thời gian để trải nghiệm chúng. Các nhà cung cấp phông chữ như Google Fonts cho phép bạn xem trước nó trông như thế nào. Khi bạn đã thấy phù hợp, hãy sử dụng chúng.

Sử dụng web fonts sẽ giúp bạn dễ dàng thay đổi fonts khi bạn muốn phát triển WordPress Theme hoặc thiết lập website của mình.

Cách thêm fonts bằng plugin trong WordPress

Nếu bạn đã chọn được font phù hợp thì giờ là lúc bạn cần thêm nó vào WordPress site.

Nếu bạn không cảm thấy an tâm khi thêm font vào tập tin của WordPress Theme, bạn có thể cài đặt một plugin để thêm font vào website của mình. Đây là cách đơn giản và an toàn nếu bạn là người mới.

Một plugin mà bạn có thể dùng là Google Fonts Typography. Nó cho phép bạn truy cập vào thư viện fonts của Google và xem trước kết quả trong WordPress Customizer.

Việc đầu tiên bạn cần làm là cài đặt và kích hoạt plugin này. Nếu bạn chưa biết cách cài đặt và kích hoạt plugin, hãy xem lại bài viết [Hướng dẫn cài đặt và quản lý plugin trong WordPress].

Sau khi kích hoạt, bạn hãy truy cập vào Appearance > Customize. Tại đây bạn sẽ nhìn thấy phần Google Fonts như hình bên dưới:

Google Fonts in Customizer

Nhấp vào liên kết Google Fonts để truy cập các thiết lập cho fonts chữ trên website của bạn.

Cấu hình fonts như bên dưới:

  • Basic Settings: Cấu hình fonts mặc định cho nội dung bài viết và các tiêu đề. Hình mình họa bên dưới cho bạn thấy tôi đã chọn font serif cho nội dung bài viết và một font đặc biệt cho phần tiêu đề.

Google Fonts Basic Settings

  • Advanced Settings: Tại đây bạn có thể cấu hình font cho tiêu đề và mô tả, menu điều hướng, chân trang, sidebar… của website. Bạn có thể tải font bằng cách thêm chúng bằng mã CSS tùy chỉnh trong Customizer.
  • Font Loading: Nếu có một số font bạn không cần sử dụng, hãy loại bỏ chúng để tăng tốc độ tải trang.
  • Debugging: Sử dụng tùy chọn này để buộc font hiển thị nếu nó không hoạt động một cách bình thường.

Hãy dành thời gian để thử nghiệm các cài đặt trên trong trình Customizer để đảm bảo rằng nó hoạt động theo đúng mong muốn của bạn. Sau khi bạn đã cảm thấy hài lòng, hãy nhấn nút Publish. 

Thay đổi màu chữ

Phiên bản miễn phí của plugin không cho phép bạn thay đổi màu chữ. Để có thể thay đổi màu chữ, bạn cần phải sử dụng bản trả phí hoặc sử dụng tùy chọn Additional CSS trong Customizer.

Bạn hãy truy cập vào màn hình Customizer, sau đó nhấp vào thẻ Additional CSS. Bạn sẽ nhìn thấy một khung để nhập văn bản. Hãy nhập mã CSS của mình vào đây.

Để tìm phần tử mà bạn muốn định kiểu, hãy sử dụng tính năng kiểm tra phần tử của trình duyệt web.

Tôi sử dụng trình duyệt Chrome để minh họa cho bài viết. Tôi chọn phần tử h1 để làm ví dụ.

inspect code in Chrome

WordPress Theme của tôi sử dụng màu chữ mặc định cho phần tử h1 là màu đỏ. Bạn có thể sử dụng bất kỳ màu nào mà bạn muốn. Hãy nhập đoạn mã CSS như bên dưới vào khung văn bản:

h1 {
color: #f542f5;
}

Đoạn mã trên biến màu chữ của phần tử h1 thành màu hồng.

pink heading 1

Bạn có thể lặp lại thao tác này đối với các phần tử khác mà bạn muốn đổi màu chữ.

Cách thêm web fonts một cách thủ công

Nếu bạn không muốn cài đặt plugin, bạn có thể thêm web fonts một cách thủ công bằng cách thêm mã CSS vào tập tin stylesheet.css trong WordPress Theme của mình.

Để đảm bảo an toàn cho WordPress Theme, bạn hãy dùng ChildTheme. Trong bài viết này tôi sẽ sử dụng web fonts của Google để làm minh họa.

Đầu tiên bạn cần font mà mình thích. Sau đó cho nó vào thư viện bằng cách nhấp vào biểu tượng mở rộng bên cạnh.

Nhấp vào thẻ phía bên dưới màn hình bạn sẽ nhìn thấy đoạn mã để thêm vào website của mình. Nếu bạn muốn thêm các tùy chọn mở rộng cho font, nhấp vào thẻ Customize và chọn định dạng mình mong muốn. Sau đó quay trở lại nút Embed.

Copy địa chỉ liên kết đến phông chữ mà bạn đã chọn. Lưu ý là không copy toàn bộ liên kết, chỉ copy địa chỉ mà thôi.

Ví dụ: Mã dùng để chèn đầy đủ mà Google cung cấp:

<link href=”https://fonts.googleapis.com/css?family=Raleway” rel=”stylesheet”>

Bạn chỉ cần copy đoạn: https://fonts.googleapis.com/css?family=Raleway” rel=”stylesheet.

Đây là đoạn mã chúng ta sẽ chèn vào tập tin stylesheet.

Thêm web fonts vào tập tin functions.php

Mở tập tin functions.php và thêm đoạn code bên dưới vào. Lưu ý là bạn hay thay liên kết minh họa của tôi bằng liên kết mà mình muốn.

function add_google_fonts() {
wp_register_style( ‘googleFonts’, ‘https://fonts.googleapis.com/css?family=Raleway’);
wp_enqueue_style( ‘googleFonts’);
}
add_action( ‘wp_enqueue_scripts’, ‘add_google_fonts’ );

Sau này nếu bạn muốn thêm fonts khác, bạn có thể thêm dòng mới hoặc thêm cùng dòng như này:

function add_google_fonts() {
wp_register_style( ‘googleFonts’, ‘https://fonts.googleapis.com/css?family=Merriweather|Raleway’);
wp_enqueue_style( ‘googleFonts’);
}
add_action( ‘wp_enqueue_scripts’, ‘add_google_fonts’ );

Đoạn mã trên giúp bạn thêm cả hai fonts Merriweather và Raleway vào WordPress site của mình.

Thêm fonts vào stylesheet của bạn

Để các fonts hiển thị trên website của mình, bạn cần thêm các fonts này vào tập tin stylesheet.

Việc bạn cần làm là mở tập tin stylesheet trong WordPress Theme mà mình đang sử dụng. Tập tin stylesheet cho phép bạn định kiểu phông chữ cho các phần tử khác nhau. Bạn có thể định kiểu cho bất kỳ phần tử nào mình muốn, tuy nhiên cần phải tạo điểm nhấn cho các phần tử quan trọng như phần nội dung bài viết, tiêu đề.

body {
font-family: ‘Raleway’, sans-serif;
}
h1, h2, h3 {
font-family: ‘Merriweather’, serif;
}

Trong ví dụ trên, phần nội dung sẽ sử dụng fonts Releway, phần tiêu đề từ h1 đến h3 sử dụng fonts Merriweather để hiển thị.

Giờ hãy thử truy cập vào website của bạn để xem thử fonts chữ có hiển thị đúng như mong muốn hay chưa. Nếu nó không hiển thị đúng fonts chữ, bạn hãy thử xóa bộ nhớ đệm của trình duyệt web.

Thêm fonts dự phòng cho website của bạn

Có một vài trường hợp độc giả của bạn không thể đọc được phông chữ trên trang của bạn. Nguyên nhân có thể là do thiết bị họ sử dụng cũ không được hỗ trợ hoặc vấn đề kỹ thuật của nhà cung cấp web fonts.

Trong trường hợp này, cách tốt nhất là bạn nên tạo fonts dự phòng cho website của mình.

Mã được cung cấp bởi Google đã tích hợp fonts dự phòng căn bản là sefif hoặc san-serif. Tuy nhiên chúng ta có thể thêm nhiều fonts dự phòng khác để nó phong phú hơn.

Bạn có thể sử dụng các web fonts đã được cài đặt sẵn trên máy của khách truy cập và sau đó tích hợp với fonts dự phòng serif hoặc san-serif đối với trường hợp độc giả của bạn sử dụng thiết bị di động không có sẵn các fonts thậm chí không có cả web fonts.

body {
font-family: ‘Raleway’, Helvetica, sans-serif;
}

h1, h2, h3 {
font-family: ‘Merriweather’, Georgia, serif;
}

Với đoạn code trên, nếu mọi thứ đều ổn khách truy cập sẽ nhìn thấy fonts Helvetica hoặc Georgia. Trong trường hợp xấu nhất họ sẽ nhìn thấy bất kỳ fonts nào thuộc gia đình serif hoặc san-serif mà trình duyệt của họ có thể hiển thị.

Tải fonts chữ của bạn lên để sử dụng trong WordPress

Một số nhà phát triển web không sử dụng web fonts mà tải fonts chữ của họ lên để sử dụng trong WordPress. Có nhiều lý do để họ chọn phương án này, có thể là về bảo mật, hiệu năng hay là do vấn đề tài chính.

Nếu bạn lo ngại về vấn đề hiệu năng bạn có thể sử dụng nhiều cách khác nhau để tối ưu hóa fonts chữ khiến cho nó không làm ảnh hưởng nhiều đến hiệu năng. Nếu bạn không ngần ngại về vấn đề này chúng ta cùng tìm hiểu cách thức tải fonts chữ lên máy chủ để sử dụng trong WordPress.

Tại sao cần phải tải fonts của bạn lên?

Sử dụng web fonts khá đơn giản, thuận tiện và tiết kiệm dung lượng trên máy chủ. Tuy nhiên trong một số trường hợp, sử dụng các fonts được lưu trữ trên máy chủ lại phù hợp hơn.

Những lý do khiến chúng ta lưu trữ fonts trên máy chủ web của mình là:

  • Bạn không muốn dùng fonts của các nhà cung cấp thứ ba vì lý do bảo mật.
  • Sử dụng fonts của bên thứ ba có thể làm ảnh hưởng đến hiệu năng website của bạn.
  • Bạn đã lỡ mua một bộ phông chữ để sử dụng cho website, in ấn.
  • Bạn muốn cá nhân hóa website của mình bằng một fonts độc nhất vô nhị.
  • Website của bạn là website cục bộ, người dùng trên trang của bạn không thể truy cập web fonts.

Tìm kiếm fonts để tải lên ở đâu?

Có rất nhiều nhà cung cấp web fonts cho phép bạn tải fonts về sau đó upload lên máy chủ web để sử dụng.

Nó chung là những fonts mà bạn có thể download về máy tính thì bạn đều có thể upload nó lên máy chủ.

Tuy nhiên bạn cần xem xét vấn đề giấy phép và bản quyền.

Cách thêm fonts vào WordPress site

Cách này khác một chút so với sử dụng web fonts. Việc đầu tiên bạn cần làm là tải các phông chữ yêu thích về máy tính, sau đó upload nó lên máy chủ web và cuối cùng là liên kết chúng trong tập tin style.css.

Tải về và chuyển đổi phông

Trước tiên bạn cần download phông chữ mà bạn mong muốn. Đối với Google Fonts, bạn có thể tải về bằng cách nhấp vào biểu tượng download khi xem phông trong thư viện.

download font from google fonts

Giải nén phông chữ trên máy tính của bạn sau đó xóa các phông mà bạn không muốn sử dụng.

Để sử dụng được phông chữ trên website của bạn, định dạng của nó phải là .woff. Vì thế bạn cần chuyển đổi phông chữ về định dạng này. Bạn có thể sử dụng các công cụ chuyển đổi có trên internet để thực hiện điều này.

Upload Fonts lên thư mục chứa WordPPress Theme

Giờ hãy upload các phông chữ đó vào thư mục chứa WordPress Theme. Thường là wp-content/themes/ten-WordPress-Theme. 

Bạn nên tạo một thư mục và đặt tên là Fonts để chứa các fonts chữ.

Để đảm bảo an toàn cho bố cục của WordPress Theme, tốt nhất bạn nên sử dụng ChildTheme.

Thêm Fonts trong CSS

Mở tập tin style.css trong WordPress Theme của bạn. Thêm đoạn code bên dưới vào:

@font-face {
font-family: ‘Raleway’;
src: url( “fonts/Raleway-Medium.ttf”) format(‘woff’); /* medium */
font-weight: normal;
font-style: normal;
}

@font-face {
font-family: ‘Raleway’;
src: url( “fonts/Raleway-Bold.ttf”) format(‘woff’); /* medium */
font-weight: bold;
font-style: normal;
}

@font-face {
font-family: ‘Merriweather’;
src: url( “fonts/Merriweather.ttf”) format(‘woff’); /* medium */
font-weight: normal;
font-style: normal;
}

Đoạn code trên chỉ là ví dụ, bạn có thể thêm một số fonts khác mà mình muốn. Nếu bạn muốn thêm các định dạng khác cho fonts như nghiêng, đậm…bạn cần khai báo trong @fontface và sau đó thêm các thuộc tính cho fonts.

Bây giờ thêm định kiểu cho các phần tử như bạn sử dụng web fonts.

body {
font-family: ‘Raleway’, Helvetica, sans-serif;
src: url( “/fonts/Raleway-Medium.ttf” );
}

h1, h2, h3 {
font-family: ‘Merriweather’, Georgia, serif;
}

Giờ các fonts mà bạn tải lên đã có thể hoạt động với WordPress Theme.

Cách thay đổi Fonts trong WordPress

Đọc đến đây bạn đã biết được một trong những cách cài đặt phông chữ cho WordPress site của mình cũng như cách chỉnh sửa, thay đổi chúng.

Bạn có thể chỉnh sử phông chữ của mình bằng ba cách: Sử dụng trình Customizer, trong cửa sổ tạo mới/chỉnh sửa bài viết và dùng CSS.

Chúng ta hãy cùng tìm hiểu chi tiết các cách khác nhau để thay đổi kiểu chữ, màu chữ, cỡ chữ.

Cách thay đổi kiểu chữ trong WordPress

Chúng ta cùng tìm hiểu cách thay đổi phông chữ ở cả trình biên tập cổ điển và trình biên tập dạng khối.

Thay đổi kiểu chữ trong trình soạn thảo dạng khối Gutenberg

Nếu bạn đang sử dụng phiên bản WordPress mới nhất tích hợp trình soạn thảo dạng khối Gutenberg bạn có thể thay đổi kiểu chữ khi đang tạo mới/chỉnh sửa bài viết/trang.

Bạn chỉ cần chọn khối mà mình muốn chỉnh sửa, sau đó các menu ngữ cảnh với các tùy chọn định kiểu sẽ xuất hiện ở phía trên.

Gutenberg block styling

Chọn văn bạn bạn muốn chỉnh sửa sau đó nhấp vào biểu tượng nghiêng hay đậm để định dạng cho nó. Nếu bạn nhấp vào biểu tượng hình tam giác ở phía bên phải, bạn sẽ thấy thêm các tùy chọn khác như gạch giữa.

strikethrough in Gutenberg

Thay đổi kiểu chữ trong trình soạn thảo cổ điển

Nếu bạn đang sử dụng phiên bản WordPress cũ hơn hoặc bạn đã cài plugin Classic Editor bạn cũng có thể thay đổi kiểu chữ một cách dễ dàng. (Nếu bạn không muốn sử dụng Gutenberg, bạn vẫn có thể cập nhật lên phiên bản WordPress mới nhất sau đó vô hiệu hóa nó).

Trình biên tập Classic Editor chứa một thanh công cụ ở phía trên với các tùy chọn định dạng thường dùng. Nếu bạn nhấp vào biểu tượng Toolbar Toggle ở phía bên phải, bạn sẽ thấy thêm các tùy chọn khác.

classic editor toolbar

Thay đổi phông chữ trong Customizer

Nếu bạn muốn thay đổi phông chữ cho một phần tử cụ thể nào đó, bạn có thể sử dụng mã CSS để thực hiện một cách thủ công trong trình Customizer.

Mở trình Customizer lên, sau đó nhấp vào Additional CSS. Thao tác này sẽ mở ra một mà hình, tại đây bạn có thể nhập mã CSS vào.

additional css in customizer

Giờ bạn có thể sử dụng mã CSS để thay đổi phông chữ của mình. Ví dụ tôi muốn định dạng phông chữ đối với phần tử h1 và h2 thành nghiêng, tôi sẽ nhập mã CSS như sau:

h1, h2 {

font-style: italics;

}

Thay đổi kiểu chữ trong StyleSheet

Nếu bạn có kiến thức về lập trình web bạn sẽ cảm thấy thích thú khi thêm mã CSS vào tập tin stylesheet.css để thay đổi kiểu chữ.

Để tránh các thay đổi bị mất đi sau khi bạn cập nhật WordPress Theme, hãy sử dụng ChildTheme. Bạn sẽ phải tạo một tập tin stylesheet.css trong thư mục ChildTheme. Sau này bạn có thể sử dụng tập tin stylesheet.css này để thực hiện các thay đổi có liên quan đến định kiểu website.

Thêm vào cuối tập tin các mã CSS dùng để định kiểu phông chữ. Dưới đây là một số thuộc tính thường gặp:

  • font-weight: Dùng để thiết lập độ dày, mỏng của chữ. Nó có thể nhận các giá trị: normal, bold, bolder, lighter.
  • font-style: Dùng để thiết lập kiểu chữ bình thường, nghiêng hoặc hơi nghiêng. Nó có thể nhận các giá trị: normal, italic, olique.
  • text-alignment: Dùng để căn chỉnh chữ. Nó có thể nhận các giá trị: left, right, center, justify.

Cách thay đổi màu chữ trong WordPress

Một thay đổi khác có thể bạn rất muốn thực hiện đó là thay đổi màu chữ trên website của mình. Tuy nhiên bạn cần phải phối màu sau cho hợp lý. Nếu không website của bạn sẽ trông rất lòe lẹt, diêm dúa.

Thay đổi màu chữ trong Gutenberg

Các khối văn bản trong Gutenberg cho phép bạn thay đổi màu chữ và màu nền. Để làm điều đó, hãy mở khối mà bạn muốn chỉnh sửa, sau đó nhấp vào thẻ Color Settings trong phần Block ở màn hình phía bên phải.

color setting tab

Tại đây bạn có thể thay đổi màu nền và màu chữ cho các khối văn bản.

custom colors in a block

Lưu ý rằng WordPress sẽ cảnh báo nếu sự kết hợp màu sắc làm ảnh hưởng xấu đến hiển thị, đọc bài viết. Bạn cần chọn màu sao cho phù hợp với màu sắc vốn có của WordPress Theme mà mình đang dùng.

Nếu bạn nhấp vào thẻ Advanced bên dưới thẻ Color Settings, bạn có thể thêm một lớp vào khối này. Sau đó nó cho phép bạn định kiểu trong Customizer hoặc trong tập tin stylesheet.

Thay đổi màu chữ trong Classic Editor

Thanh công cụ của trình soạn thảo cổ điển cho phép bạn thay đổi màu chữ của văn bản màu bạn đã chọn. Vì vậy bạn có thể chọn một từ và thay đổi màu sắc cho nó. Ví dụ bên dưới, tôi thay đổi màu thành đỏ đối với một câu.

classic editor changing color

Điều này rất thuận tiện, tuy nhiên bạn cũng không nên quá lạm dụng. Nếu bạn thêm quá nhiều màu chữ cho bài viết của mình, nó sẽ rất khó đọc, làm ảnh hưởng xấu đến lưu lượng truy cập.

Thay đổi màu chữ trong Customizer

Một số WordPress Theme có tùy chọn cho phép thay đổi màu chữ. Tùy theo các Theme khác nhau mà các tùy chọn thay đổi màu chữ cũng khác nhau. Một số Theme chú trọng đến thay đổi màu chữ của tiều đề, liên kết và các thành phần khác.

Nếu bạn muốn thay đổi màu chữ cho một phần tử nào đó không có trong các tùy chọn của WordPress Theme, bạn có thể thêm CSS vào trình Customizer thực hiện điều này.

Chọn Customize > Additional CSS sau đó nhập mã CSS của bạn vào.

additional CSS color

Khi bạn đã thấy hài lòng với các thay đổi, nhấp nút Publish để lưu lại.

Thay đổi màu chữ trong tập tin Stylesheet của bạn

Cũng giống như đối với phông chữ, bạn có thể sử dụng tập tin stylesheet.css để thay đổi màu chữ cho các phần tử trên website của mình.

Ví dụ bên dưới, tôi thay đổi màu chính cho văn bản trên website của mình. Sử dụng phần tử body.

body {

color = #222222;
}

Thay đổi cỡ chữ trong WordPress

Vì một số lý do nào đó, bạn muốn cỡ chữ trên WordPress site của mình lớn hơn so với kích cỡ mặc định. Có nhiều cách khác nhau giúp bạn thực hiện điều này.

Thay đổi cỡ chữ trong Gutenberg

Với Gutenberg, bạn có thể thay đổi cỡ chữ trong các khối khác nhau.

Chọn khối sau đó nhấp vào thẻ Text Settings trong menu Blocks ở phía bên phải màn hình. Bạn có thể khiến cho cỡ chữ lớn hơn hoặc nhỏ hơn tùy theo nhu cầu của mình.

editing font size in gutenberg

Bạn nên lưu ý là nếu một bài viết có quá nhiều cỡ chữ khác nhau nó sẽ khiến cho ta có cảm giác rời rạc và khó đọc.

Thay đổi cỡ chữ trong Customizer

Tùy vào WordPress site mà bạn đang dùng, bạn sẽ có các tùy chọn để thay đổi cỡ chữ trong Customizer như: thay đổi cỡ chữ đối với toàn bộ website hay chỉ với tiêu đề hoặc nội dung.

Nếu Theme của bạn không tích hợp tùy chọn thay đổi cỡ chữ trong Customizer, bạn có thể sử dụng tùy chọn Additional CSS. Truy cập vào Customize > Additional CSS, sau đó nhập mã CSS vào.

Ví dụ bên dưới tôi làm cho cỡ chữ của tiêu đề widget lớn hơn với CSS:

h2.widget-title{

font-size: 3em;

}

styling font size with additional css

Thay đổi cỡ chữ trong StyleSheet

Cách thay đổi cỡ chữ trong StyleSheet cũng giống như cách thay đổi các định dạng khác của phông.

Nếu bạn muốn thay đổi cỡ chữ đối với tất cả văn bản trên website, bạn có thể sử dụng phần tử body.

body{

font-size: 14px;

}

Lưu ý là nếu muốn thay đổi cỡ chữ cho website, bạn nên tiến hành thực hiện trong localhost hoặc trên môi trường staging trước.

Cách tối ưu phông chữ trong WordPress

Dù cho bạn đang sử dụng web fonts hay dùng phông chữ lưu trữ trên host bạn cũng cần phải tối ưu hóa chúng.

Dưới đây là một số gợi ý giúp bạn tối ưu hóa phông chữ trên WordPress site của mình.

  • Nếu bạn đang sử dụng web fonts, bạn cần làm mọi thứ trong khả năng có thể để đảm bảo không làm ảnh hưởng đến hiệu năng của trang web.
  • Sử dụng bộ nhớ đệm để đảm bảo các trang không cần phải tạo mới mỗi khi tải.
  • Sử dụng CDN để tăng tốc độ tải trang cũng như tốc độ tải phông chữ.
  • Chỉ sử dụng các phông mà bạn thật sự cần.
  • Khi thêm mã CSS thủ công, hãy thêm mã vào tập tin stylesheet không nên thêm vào phần header.
  • Sử dụng CSS nội tuyến để giảm một ít thời gian tải.

Lời kết

Thay đổi fonts chữ tuy không phải quá khó khăn nhưng cũng không hề đơn giản đối với người mới. Bạn có 03 cách khác nhau để thực hiện điều này:

  1. Sử dụng plugin.
  2. Thêm mã CSS vào tập tin stylesheet của WordPress Theme.
  3. Upload phông chữ của bạn lên host để sử dụng.

Sau đó bạn cần tập trung vào việc tối ưu hóa phông chữ trên WordPress site của mình để đảm bảo nó không làm ảnh hưởng đến hiệu suất.

Nếu bạn thực hiện theo nội dung bài viết, bạn không chỉ có thể thay đổi phông chữ mà còn có thể kiểm soát chúng trong WordPress Theme của mình.

Nếu bạn thích bài viết này, đừng quên Like và Share.

Hẹn gặp lại bạn trong các bài viết tiếp theo./.

Đăng ký nhận bài viết mới nhất

Hãy đăng ký nhận tin để nhận được những nội dung thú vị và tuyệt vời!

Để lại bình luận