Phông chữ WordPress không thay đổi

Phông chữ có thể tạo ra sự khác biệt giữa một trang web buồn tẻ và một trang web đẹp. Bằng cách học cách thay đổi phông chữ trong WordPress, bạn có thể làm cho trang web của mình trông hiện đại, chuyên nghiệp và có thương hiệu

Nhưng cách tốt nhất để sử dụng phông chữ trong trang web WordPress của bạn là gì và làm cách nào để bạn chọn đúng phông chữ cho thiết kế của mình?

Trong hướng dẫn này, tôi sẽ hướng dẫn bạn mọi thứ bạn cần biết về phông chữ trong WordPress. Bạn sẽ tìm hiểu về

Phông chữ. thuật ngữ

Hãy bắt đầu bằng cách xem thuật ngữ xung quanh phông chữ trên web

  • Phông chữ web (còn gọi là phông chữ HTML) là phông chữ được lưu trữ trên trang web của bên thứ ba và được liên kết với trang web của bạn
  • Phông chữ được lưu trữ cục bộ chỉ có vậy (được lưu trữ trên máy chủ của trang web của bạn. )
  • Phông chữ an toàn trên web là một loạt phông chữ hạn chế được cài đặt sẵn trên (hầu hết) tất cả các máy tính và bạn có thể khá tin tưởng rằng tất cả khách truy cập của mình sẽ có quyền truy cập vào

Hãy cùng xem các tùy chọn để thêm phông chữ vào trang web của bạn

Cách thêm phông chữ vào trang web WordPress của bạn (Tùy chọn)

Trước khi bắt đầu thêm phông chữ vào trang web của bạn, sẽ hữu ích nếu bạn hiểu các tùy chọn có sẵn cho mình

Xem cách Kinsta chống lại đối thủ. Đối chiếu

Phông chữ là một phần trong thiết kế trang web của bạn, vì vậy trong hầu hết các trường hợp, chúng sẽ được mã hóa thông qua chủ đề của bạn – nhưng không phải lúc nào cũng vậy. Trong một số trường hợp, bạn có thể quyết định sử dụng plugin để bật phạm vi phông chữ rộng hơn trong trang web của mình

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

  • Sử dụng phông chữ web chẳng hạn như Google Fonts bằng cách cài đặt plugin cho phép bạn truy cập
  • Sử dụng phông chữ web bằng cách mã hóa chúng vào chủ đề của bạn và đánh dấu chúng (nghe có vẻ không phức tạp)
  • Lưu trữ phông chữ của bạn trên trang web của riêng bạn và thêm chúng vào chủ đề của bạn

Có hai điểm khác biệt chính – liệu bạn sử dụng phông chữ web, được lưu trữ bên ngoài trang web của bạn hay bạn chọn tự lưu trữ các tệp phông chữ của mình. Trong hướng dẫn này, chúng ta sẽ xem xét ưu và nhược điểm của từng

Hãy bắt đầu bằng cách xem phông chữ web. tại sao bạn có thể chọn sử dụng chúng và cách thêm chúng vào trang web của bạn

Sử dụng Phông chữ Web trong WordPress

Phông chữ web là cách phổ biến nhất để thêm phông chữ vào trang web của bạn vì chúng giúp dễ dàng thêm nhiều loại phông chữ

Phông chữ Web là gì?

Phông chữ web là phông chữ được lưu trữ trên trang web của nhà cung cấp bên thứ ba. Thay vì sao chép các tệp vào trang web của riêng bạn, bạn liên kết đến trang web của nhà cung cấp và chúng được kéo vào từ đó

Điều này có nghĩa là bạn có quyền truy cập vào nhiều loại phông chữ mà không phải sử dụng không gian máy chủ trên dịch vụ lưu trữ của riêng bạn. Điều đó cũng có nghĩa là nếu tệp phông chữ thay đổi theo thời gian, thì bạn không phải cập nhật tệp của mình và bạn sẽ tự động có quyền truy cập vào phiên bản mới của tệp từ nhà cung cấp

Phông chữ web có thể miễn phí hoặc bạn có thể trả tiền cho chúng, thường thông qua đăng ký. Một số nhà cung cấp phổ biến là

  • Phông chữ của Google. Nhà cung cấp phông chữ web miễn phí lớn nhất. Bạn cũng có thể tải tất cả phông chữ của họ xuống máy tính của mình, nghĩa là nếu bạn muốn tạo tài liệu ngoại tuyến bằng cách sử dụng cùng phông chữ với trang web của mình, bạn có thể. Và tất cả đều miễn phí
  • Phông chữ web Adobe Edge. Đây cũng là miễn phí. Mặc dù chúng được thiết kế để sử dụng với các sản phẩm của Adobe nhưng chúng vẫn hoạt động tốt trên bất kỳ trang web nào
  • Phông chữ. com là nhà cung cấp phông chữ cao cấp, bạn có thể cần sử dụng phông chữ này nếu bạn phải khớp phông chữ web của mình với phông chữ từ tài liệu in của bạn và phông chữ này không có sẵn thông qua nhà cung cấp miễn phí
  • fontfabric là một nhà thiết kế phông chữ cung cấp các phông chữ cao cấp để sử dụng làm phông chữ web và trực tuyến. Bạn sẽ phải trả tiền cho những thứ này nhưng sẽ nhận được thứ gì đó riêng biệt hơn nếu bạn sử dụng phông chữ của Google
Phông chữ WordPress không thay đổi
Phông chữ của Google

Tất cả các nhà cung cấp này cho phép bạn cung cấp phông chữ trực tiếp từ máy chủ của họ bằng cách thêm một số mã vào trang web WordPress của bạn hoặc đôi khi bằng cách sử dụng plugin có nghĩa là bạn không phải thêm bất kỳ mã nào

Phông chữ web khác với phông chữ an toàn trên web. Bạn có thể sử dụng chúng làm dự phòng cho phông chữ web trong trường hợp khách truy cập trang web của bạn không thể kết nối với phông chữ web vì một số lý do. Tôi sẽ chỉ cho bạn cách làm điều đó sau trong bài đăng này

Tại sao nên sử dụng Phông chữ Web?

Vì vậy, bây giờ bạn đã biết phông chữ web là gì, tại sao bạn lại chọn sử dụng chúng thay vì lưu trữ phông chữ của riêng bạn?

Dưới đây là một số lợi ích

  • Xoa dịu. thêm một vài dòng mã hoặc cài đặt plugin sẽ nhanh hơn tải xuống và tải lên các tệp phông chữ và giúp thay đổi phông chữ dễ dàng hơn nếu bạn quyết định trong tương lai
  • Phạm vi phông chữ. có hàng ngàn phông chữ có sẵn dưới dạng phông chữ web và danh sách này đang tăng lên mọi lúc
  • cập nhật. Nếu tệp phông chữ cần được cập nhật, có thể để thêm các phông chữ biến đổi (sắp tới sẽ bổ sung thêm) hoặc thêm các ký tự bổ sung, thì trang web của bạn sẽ có quyền truy cập vào phiên bản mới mà bạn không cần phải làm bất kỳ điều gì

Hầu hết các trang web sử dụng phông chữ web, với phông chữ an toàn cho web làm bản sao lưu. Và với WordPress, điều đó rất dễ thực hiện

Tìm phông chữ web tốt nhất cho trang web của bạn

Đã quyết định sẽ sử dụng phông chữ web, giờ đây bạn có một quyết định khó khăn. những phông chữ để sử dụng?

Vào thời xa xưa khi tất cả các nhà phát triển web có quyền truy cập vào những phông chữ an toàn cho web được cài đặt sẵn đó, đây là một quyết định rất dễ dàng. Bạn muốn sử dụng phông chữ serif hay sans-serif? . ) Sau khi đưa ra quyết định đó, sự lựa chọn của bạn rất hạn chế

Nhưng bây giờ, thế giới là con hàu của bạn

Dưới đây là một số mẹo giúp bạn chọn phông chữ tốt nhất cho trang web của mình

  • Nhìn vào tài liệu in của bạn. Có phông chữ nào đã được sử dụng mà bạn có thể tìm thấy dưới dạng phông chữ web không?
  • Nhìn vào các trang web của đối thủ cạnh tranh của bạn. Họ đang sử dụng những loại phông chữ nào?
  • Hãy suy nghĩ về loại tâm trạng bạn muốn truyền tải bằng phông chữ của mình. Một số phông chữ trông hiện đại hơn, một số khác truyền thống hơn. Một số vui vẻ, những người khác nghiêm túc hơn
  • Bám sát văn bản nội dung và sử dụng các phông chữ thú vị hơn cho tiêu đề nếu bạn muốn
  • Chọn từ các phông chữ phổ biến nhất của Google – những phông chữ này sẽ quen thuộc với khách truy cập trang web và dễ đọc

Khi bạn đã chọn phông chữ của mình, hãy dành thời gian thử nghiệm với chúng. Các nhà cung cấp phông chữ như Google Fonts cho phép bạn nhập văn bản tùy chỉnh để xem nó trông như thế nào trong phông chữ bạn đã chọn. Sau khi bạn nhìn thấy văn bản của chính mình trong phông chữ, nó có thể giúp bạn quyết định xem đó có phải là phông chữ phù hợp với bạn không

Phông chữ WordPress không thay đổi
Thử nghiệm với phông chữ của bạn

Và hãy nhớ rằng việc sử dụng phông chữ web giúp thay đổi phông chữ của bạn rất dễ dàng để bạn luôn có thể chuyển sang tùy chọn khác trong khi phát triển chủ đề hoặc thiết lập trang web của mình

Cách thêm phông chữ web bằng plugin WordPress

Vì vậy, bạn đã chọn phông chữ đã chọn, bây giờ là lúc thêm nó vào trang web của bạn

Nếu bạn không cảm thấy thoải mái khi thêm mã vào các tệp chủ đề của mình, bạn có thể cài đặt plugin cho phép bạn truy cập Google Fonts và sử dụng bất kỳ phông chữ nào bạn muốn trên trang web của mình

Plugin Google Fonts Typography cung cấp cho bạn quyền truy cập vào toàn bộ thư viện phông chữ của Google và cho phép bạn xem lại chúng thông qua Trình tùy chỉnh WordPress

Cài đặt plugin trên trang web của bạn giống như bất kỳ plugin nào khác, sau đó kích hoạt nó

Chuyển đến Giao diện > Tùy chỉnh để truy cập Tùy biến. Bạn sẽ thấy một phần dành cho Google Fonts

Phông chữ WordPress không thay đổi
Google Fonts trong Customizer

Nhấp vào liên kết đó để truy cập cài đặt cho phông chữ của bạn. Cấu hình chúng như sau

Cài đặt cơ bản. định cấu hình phông chữ mặc định cho nội dung văn bản và tiêu đề của bạn, cũng như bất kỳ nút nào. Trong ảnh chụp màn hình bên dưới, bạn có thể thấy rằng tôi đã thêm một phông chữ có chân dễ đọc cho phần nội dung và một phông chữ đặc biệt hơn cho các tiêu đề

Phông chữ WordPress không thay đổi
Định cấu hình cài đặt cơ bản

Cài đặt nâng cao. Tại đây, bạn có thể định cấu hình nhãn hiệu (tiêu đề và mô tả trang web), điều hướng (menu của bạn), nội dung và tiêu đề chi tiết hơn, thanh bên và chân trang của bạn. Bạn cũng có thể tải phông chữ mà không cần gán chúng cho bất kỳ thứ gì, điều đó có nghĩa là bạn có thể thêm chúng vào bất kỳ CSS tùy chỉnh nào trong Trình tùy chỉnh

Tải phông chữ. Nếu có bất kỳ trọng lượng phông chữ nào bạn không cần (tôi. e. đậm, nghiêng, đại loại như vậy), bạn có thể bỏ chọn chúng ở đây để chúng không làm chậm trang web của bạn một cách không cần thiết

gỡ lỗi. Sử dụng điều này để buộc bất kỳ phông chữ nào hiển thị nếu chúng không hoạt động như bình thường

Dành thời gian làm việc với các cài đặt này và kiểm tra chúng trong Tùy biến để đảm bảo chúng hoạt động theo cách bạn muốn. Sau đó, khi bạn hài lòng với cài đặt của mình, hãy nhấp vào nút Xuất bản. Đừng rời khỏi Tùy biến mà chưa nhấp vào Xuất bản, nếu không bạn sẽ mất các thay đổi của mình

Chỉnh sửa màu phông chữ

Phiên bản miễn phí của plugin không cho phép bạn chỉnh sửa màu phông chữ của mình. Để làm điều đó, bạn sẽ phải mua phiên bản cao cấp hoặc sử dụng tùy chọn CSS bổ sung trong Công cụ tùy chỉnh

Quay lại màn hình chính của Công cụ tùy chỉnh và nhấp vào tab CSS bổ sung. Bạn sẽ thấy một vùng văn bản trống nơi bạn có thể thêm CSS của riêng mình

Để tìm phần tử bạn cần tạo kiểu, hãy chọn phần tử đó và sử dụng trình kiểm tra mã trong trình duyệt của bạn để tìm xem phần tử đó đã có kiểu màu gì

Dưới đây tôi đang sử dụng Google Chrome và tôi đã nhắm mục tiêu một yếu tố

https://fonts.googleapis.com/css?family=Raleway
0

Phông chữ WordPress không thay đổi
Kiểm tra mã của bạn trong Chrome

Trong chủ đề WordPress của tôi, nó được thừa hưởng màu sắc từ phần tử cơ thể. Tôi muốn thêm một cái gì đó cụ thể hơn. Trong vùng văn bản cho CSS của bạn, hãy nhập CSS cho phần tử của bạn và màu bạn muốn sử dụng. Của tôi trông như thế này

h1 {
 color: #f542f5;
}

Điều đó mang lại cho tôi một phần tử h1 màu hồng sáng

Phông chữ WordPress không thay đổi
Thay đổi màu sắc của tiêu đề

Bạn có thể lặp lại điều này với bất kỳ thành phần văn bản nào mà bạn muốn thêm màu vào, cũng như với bất kỳ thành phần nào bạn muốn thêm phông chữ tùy chỉnh không được bao gồm trong các tùy chọn trong các màn hình khác. Nếu bạn muốn biết sử dụng CSS nào cho phông chữ, hãy đọc phần của bài đăng này về việc sửa đổi phông chữ của bạn thông qua CSS

Cách thêm phông chữ web theo cách thủ công

Nếu bạn không muốn thêm plugin bổ sung vào trang web của mình và có quyền truy cập vào mã cho chủ đề của mình, bạn có thể cài đặt và sử dụng phông chữ web bằng cách thêm một số mã vào tệp chức năng và biểu định kiểu của bạn

Nếu trang web của bạn đang sử dụng một chủ đề riêng biệt mà bạn có thể chỉnh sửa, thì bạn có thể chỉnh sửa tệp chức năng và biểu định kiểu từ chủ đề của mình. Nhưng nếu bạn đang sử dụng chủ đề của bên thứ ba mà bạn đã mua hoặc lấy từ thư mục chủ đề WordPress, thì bạn sẽ cần tạo một chủ đề con. Sau đó, bạn sẽ cần cung cấp cho nó hai tệp. chức năng. php và kiểu. css

Hãy thực hiện quy trình thêm phông chữ web vào chủ đề của bạn theo cách thủ công. Tôi sẽ làm việc với Google Fonts cho ví dụ này, vì nó được sử dụng phổ biến nhất và nó miễn phí

Chọn một phông chữ và lấy liên kết

Bắt đầu bằng cách chọn phông chữ của bạn từ Google Fonts. Thêm nó vào thư viện của bạn bằng cách nhấp vào biểu tượng dấu cộng bên cạnh nó

Nhấp vào tab ở cuối màn hình cho thư viện của bạn và bạn sẽ thấy một số mã để bạn thêm vào trang web của mình. Nếu bạn muốn thêm các kiểu và trọng lượng phông chữ bổ sung, hãy nhấp vào tab Tùy chỉnh và chọn những kiểu bạn muốn. Sau đó quay lại tab Nhúng

Don’t copy the code exactly: you’ll be using it, but instead of calling the font in the section of your site’s header, you’ll be enqueuing the fonts. This is the correct way to do it in WordPress.

Thay vào đó, từ phần Nhúng phông chữ, chỉ sao chép liên kết đến phông chữ

Vì vậy, trong trường hợp của tôi, Google Fonts đang cung cấp cho tôi mã này

Tôi chỉ cần sao chép bit này

https://fonts.googleapis.com/css?family=Raleway

Xếp hàng (các) phông chữ

Mở tệp chức năng của chủ đề của bạn và thêm phần sau, thay thế liên kết cho phông chữ của tôi bằng liên kết mà Google đã cung cấp cho bạn cho phông chữ của bạn

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

Điều này bao gồm phong cách từ các máy chủ Google Fonts. Nếu bạn cần thêm nhiều phông chữ hơn cho nó trong tương lai, bạn có thể thêm một dòng mới vào chức năng của mình hoặc thêm nó vào cùng một dòng, như vậy

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

Điều này sẽ bao gồm cả phông chữ Merriweather và Raleway

Thêm (các) Phông chữ vào Biểu định kiểu của bạn

Điều này sẽ không làm cho phông chữ hoạt động trong trang web của bạn. bạn vẫn cần thêm nó vào biểu định kiểu của chủ đề

mở phong cách. css trong chủ đề của bạn và thêm mã để định kiểu các thành phần riêng lẻ bằng phông chữ web của bạn. Đảm bảo rằng bạn thêm nó sau bất kỳ CSS hiện có nào cho phông chữ, nếu không nó có thể bị ghi đè bởi điều đó

Những phần tử nào bạn tạo kiểu sẽ tùy thuộc vào bạn, nhưng thông thường bạn sẽ sử dụng phông chữ dễ đọc cho phần thân và thứ gì đó lạ mắt hơn cho các tiêu đề

body {
 font-family: 'Raleway', sans-serif;
}

h1, h2, h3 {
 font-family: 'Merriweather', serif;
}

Trong trường hợp trên, mọi thứ trên trang sẽ sử dụng phông chữ Raleway, ngoại trừ các phần tử h1, h2 và h3 sẽ sử dụng phông chữ Merriweather

Bây giờ, hãy lưu biểu định kiểu của bạn và kiểm tra trang web của bạn để đảm bảo rằng tất cả đều hoạt động như bạn mong đợi. Nếu các phông chữ mới không hiển thị, hãy thử xóa bộ nhớ cache của trình duyệt và kiểm tra xem các phông chữ đó có bị ghi đè bởi bất kỳ kiểu dáng nào đối với các phông chữ thấp hơn trong biểu định kiểu dáng không. Đây là lý do tại sao nên thêm kiểu mới của bạn ở cuối biểu định kiểu hoặc thay thế kiểu phông chữ hiện tại bằng kiểu mới của bạn (thậm chí còn tốt hơn)

Thêm phông chữ dự phòng

Có thể đôi khi ai đó truy cập trang web của bạn và không thể truy cập tệp phông chữ web vì một số lý do. Có thể họ đang sử dụng hoặc sử dụng một thiết bị cũ không hiển thị phông chữ web. Hoặc có thể nhà cung cấp phông chữ web của bạn đang gặp sự cố kỹ thuật

Vì lý do này, bạn nên có một bản sao lưu tại chỗ

Mã mà Google phông chữ cung cấp cho bạn đã có bản sao lưu chỉ cần chỉ định

https://fonts.googleapis.com/css?family=Raleway
1hoặc
https://fonts.googleapis.com/css?family=Raleway
2, nhưng chúng tôi có thể tiến thêm một bước nữa

Sử dụng một trong các phông chữ sẵn sàng cho trang web đã được cài đặt trên máy của khách truy cập của bạn, sau đó bao gồm dự phòng thứ hai chỉ là

https://fonts.googleapis.com/css?family=Raleway
1 hoặc
https://fonts.googleapis.com/css?family=Raleway
2, trong trường hợp họ đang sử dụng thiết bị di động thậm chí không có phông chữ sẵn sàng cho trang web

Quay lại biểu định kiểu của bạn và chỉnh sửa CSS của bạn để nó đọc giống như thế này

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

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

Điều này có nghĩa là những người truy cập trang web của bạn sẽ thấy phông chữ web của bạn nếu tất cả đều ổn;

Lưu trữ phông chữ của riêng bạn trong WordPress

Một số nhà phát triển không thích sử dụng phông chữ web mà thay vào đó lưu trữ phông chữ trên máy chủ của riêng họ và bạn có thể là một trong số họ

Điều này có thể vì một hoặc nhiều lý do, bao gồm bảo mật, hiệu suất hoặc ngân sách

Nếu bạn lo lắng về hiệu suất, bạn có thể tối ưu hóa hiệu suất của phông chữ web của mình theo một số cách sẽ được đề cập sau trong bài đăng này. Nhưng nếu bạn đã quyết định đi theo tuyến đường địa phương, bạn sẽ cần biết cách thực hiện

Tại sao lưu trữ phông chữ của riêng bạn?

Sử dụng phông chữ web thường dễ dàng hơn và có thể giúp bạn linh hoạt hơn cũng như chiếm ít dung lượng hơn trên máy chủ của bạn. Nhưng điều đó không có nghĩa là không có trường hợp phông chữ lưu trữ cục bộ có thể không phù hợp hơn

Lý do bạn có thể muốn lưu trữ phông chữ cục bộ bao gồm

Bạn có thể thấy rằng bạn có thể khắc phục một số vấn đề này

  • Bạn có thể không muốn lấy tài nguyên từ các nhà cung cấp bên thứ ba vì lý do bảo mật, biết rằng bảo mật trang web của riêng bạn do bạn kiểm soát
  • Bạn có thể thấy rằng việc sử dụng dịch vụ của bên thứ ba ảnh hưởng đến hiệu suất trang web của bạn
  • Bạn có thể đã mua một tệp phông chữ và muốn sử dụng nó. Đảm bảo giấy phép của bạn bao gồm việc sử dụng trang web cũng như sử dụng trong các tài liệu in
  • Trang web của bạn có thể được lưu trữ cục bộ, chẳng hạn như trên mạng nội bộ và người dùng sẽ không có quyền truy cập vào phông chữ web khi họ đang sử dụng nó

Nơi tìm phông chữ bạn có thể lưu trữ cục bộ

Nhiều phông chữ web cũng có thể được tải xuống để sử dụng làm phông chữ được lưu trữ cục bộ, nhưng bạn sẽ phải kiểm tra xem giấy phép có cho phép điều này không. Trong trường hợp của Google Fonts, nó được phép

Bạn cũng sẽ thấy rằng có những phông chữ không có sẵn dưới dạng phông chữ web mà bạn có thể tải xuống và tự lưu trữ. Bất kỳ tệp phông chữ nào bạn có thể tải xuống máy tính của mình cũng có thể được tải lên trang web của bạn và được lưu trữ ở đó. Nếu bạn cần sử dụng phông chữ không có sẵn dưới dạng phông chữ web để liên kết với thương hiệu của mình, thì đây sẽ là giải pháp nhưng hãy đảm bảo giấy phép của bạn cho phép

Cách thêm phông chữ được lưu trữ cục bộ vào trang web WordPress của bạn

Vì vậy, bạn biết bạn muốn lưu trữ cục bộ phông chữ của mình, bạn sẽ thiết lập nó như thế nào?

Quá trình này khác với việc sử dụng phông chữ web. Bạn phải tải (các) tệp lên trang web của mình và bạn liên kết tới chúng trong biểu định kiểu của mình mà không cần phải xếp chúng vào hàng đợi trong tệp chức năng của bạn

Tải xuống và chuyển đổi phông chữ

Bắt đầu bằng cách tải xuống các phông chữ bạn muốn sử dụng. Trong Google Fonts, bạn có thể thực hiện việc này bằng cách nhấp vào biểu tượng tải xuống khi xem phông chữ trong thư viện của mình

Phông chữ WordPress không thay đổi
Tải xuống phông chữ từ Google Fonts

Giải nén tệp phông chữ trên máy tính của bạn và xóa mọi trọng lượng phông chữ bạn không cần sử dụng trên trang web của mình. không ích gì khi tải lên các tệp mà bạn sẽ không sử dụng

Để sử dụng trên trang web của bạn, các tệp sẽ cần phải ở trong. định dạng woff. Nếu chúng không phải (chúng sẽ không như vậy nếu bạn lấy chúng từ các phông chữ của Google), bạn có thể sử dụng một dịch vụ như Convertio để chuyển đổi chúng

Tải phông chữ lên chủ đề của bạn

Bây giờ hãy tải (các) tệp phông chữ lên chủ đề của bạn, trong wp-content/themes/themename, trong đó themename là thư mục dành cho chủ đề của bạn. Bạn nên đặt bất kỳ tệp phông chữ nào vào thư mục riêng của chúng trong chủ đề, chẳng hạn như thư mục phông chữ

Nếu bạn đang làm việc với chủ đề của bên thứ ba, hãy tạo một chủ đề con cho tệp phông chữ và biểu định kiểu của bạn

Triển khai ứng dụng của bạn lên Kinsta - Bắt đầu với Khoản tín dụng $20 ngay bây giờ

Chạy nút của bạn. js, Python, Go, PHP, Ruby, Java và Scala (hoặc hầu hết mọi thứ khác nếu bạn sử dụng Dockerfiles tùy chỉnh của riêng mình), trong ba bước đơn giản

Triển khai ngay bây giờ và nhận $20 giảm giá

Khi bạn đã hoàn thành việc đó, bạn sẽ cần thêm phông chữ vào biểu định kiểu của mình

Thêm (các) Phông chữ trong CSS

Mở biểu định kiểu của chủ đề của bạn

Thêm mã như thế này, thay thế phông chữ tôi đã sử dụng bằng phông chữ của riêng bạn

@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;
}

Thêm bất kỳ chi tiết nào bạn cần. Lưu ý rằng nếu bạn muốn sử dụng chữ đậm, chữ nghiêng, v.v. các biến thể của phông chữ của bạn, bạn cần khai báo từng cái bằng cách sử dụng

https://fonts.googleapis.com/css?family=Raleway
5 và sau đó chỉ định trọng lượng hoặc kiểu cho từng loại, như tôi đã làm ở trên với Raleway cho các loại đậm và bình thường

Bây giờ, hãy thêm kiểu dáng cho các phần tử của bạn, giống như khi bạn sử dụng phông chữ web

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

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

Các phông chữ được lưu trữ cục bộ của bạn giờ đây sẽ hoạt động với chủ đề của bạn

Cách thay đổi phông chữ trong WordPress

Bây giờ bạn đã biết cách cài đặt phông chữ trong trang web WordPress của mình theo một trong hai cách. Làm thế nào về việc chỉnh sửa chúng?

Bạn có thể chỉnh sửa phông chữ của mình theo một trong ba cách. thông qua Trình tùy chỉnh, trong màn hình chỉnh sửa bài đăng hoặc trang hoặc sử dụng CSS

Hãy xem xét từng tùy chọn để thay đổi kiểu phông chữ, màu sắc và kích thước

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

Hãy xem cách chúng tôi có thể thực hiện cả hai điều đó nếu bạn đang sử dụng Trình chỉnh sửa khối hoặc Trình chỉnh sửa cổ điển

Thay đổi kiểu phông chữ trong Block Editor (Gutenberg)

Nếu bạn đang sử dụng phiên bản WordPress mới nhất với trình chỉnh sửa Gutenberg, bạn có thể thay đổi kiểu văn bản khi chỉnh sửa nó trong bài đăng hoặc trang của mình

Chọn khối bạn muốn chỉnh sửa và menu kiểu dáng sẽ xuất hiện phía trên khối đó

Phông chữ WordPress không thay đổi
Kiểu dáng khối Gutenberg

Chọn đoạn văn bản muốn sửa rồi click vào các biểu tượng để in đậm hoặc in nghiêng. Nếu bạn nhấp vào mũi tên bên cạnh những mũi tên đó, bạn sẽ thấy rằng bạn cũng có thể chọn gạch ngang

Phông chữ WordPress không thay đổi
Gạch ngang ở Gutenberg

Thay đổi kiểu phông chữ trong Trình chỉnh sửa cổ điển

Nếu bạn đang chạy phiên bản WordPress cũ hơn hoặc bạn đã cài đặt plugin Trình chỉnh sửa cổ điển, bạn cũng có thể chỉnh sửa kiểu phông chữ. (Nếu bạn không muốn trình chỉnh sửa Gutenberg, tốt hơn hết là cập nhật WordPress và tắt Gutenberg. )

Trình chỉnh sửa cổ điển bao gồm một thanh công cụ phía trên ngăn chỉnh sửa chính nơi bạn có thể thay đổi kiểu văn bản của mình. Nếu bạn nhấp vào biểu tượng Chuyển đổi thanh công cụ ở bên phải, bạn có thể truy cập nhiều tùy chọn hơn, bao gồm cả gạch ngang

Phông chữ WordPress không thay đổi
Thanh công cụ kiểu dáng trình soạn thảo cổ điển

Thay đổi kiểu phông chữ trong Customizer

Nếu bạn muốn thay đổi kiểu phông chữ cho một phần tử cụ thể, bạn có thể thực hiện việc này bằng cách thêm CSS thủ công vào Trình tùy chỉnh

Mở Tùy biến và nhấp vào CSS bổ sung. Điều này sẽ mở ra một màn hình nơi bạn có thể nhập CSS

Phông chữ WordPress không thay đổi
CSS bổ sung trong Tùy biến

Bây giờ bạn có thể nhập CSS cho phông chữ của mình vào hộp. Vì vậy, nếu bạn muốn thay đổi tất cả các phần tử h1 và h2 thành chữ in nghiêng, bạn sẽ thêm CSS này

h1, h2 {
 font-style: italics;
}

Thay đổi kiểu phông chữ trong biểu định kiểu của bạn

Nếu bạn cảm thấy thoải mái khi thêm mã vào biểu định kiểu của mình, thì đây là cách tốt hơn để làm điều đó

Nếu bạn đang sử dụng chủ đề của bên thứ ba, hãy tạo chủ đề con cho phong cách của riêng bạn, nếu không mọi thay đổi bạn thực hiện sẽ bị mất khi bạn cập nhật chủ đề. Bạn sẽ phải tạo một biểu định kiểu trong chủ đề con để nói với WordPress rằng đó là một chủ đề con. đó là nơi bạn đặt kiểu phông chữ mới của mình

Nếu đang sử dụng chủ đề của riêng mình, bạn có thể chỉnh sửa và sửa đổi CSS trong biểu định kiểu của riêng mình. Các tập tin là phong cách. css và bạn sẽ tìm thấy nó trong thư mục chủ đề của mình ở wp-content/themes

Thêm bất kỳ kiểu phông chữ nào vào cuối biểu định kiểu của bạn để nó không bị hủy bỏ bởi bất kỳ thứ gì đã có. Hoặc thậm chí tốt hơn, xóa và ghi đè bất kỳ kiểu phông chữ hiện có nào, trừ khi bạn muốn giữ lại nó

Thay đổi trọng lượng của một phần tử với trọng lượng phông chữ

0

Thay đổi kiểu của một phần tử với kiểu phông chữ

1

Thay đổi căn chỉnh bằng text-alignment

Mệt mỏi vì một máy chủ chậm cho trang web WordPress của bạn? . Kiểm tra các kế hoạch của chúng tôi

2

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

Một thay đổi khác mà bạn có thể muốn thực hiện là thay đổi màu của một số văn bản trong trang web của mình. Coi chừng đi quá đà với điều này. chủ đề của bạn đã được thiết kế với các màu phối hợp ăn ý với nhau và nếu bạn thêm quá nhiều màu, chủ đề có thể trông lòe loẹt và không chuyên nghiệp

Thay đổi màu chữ trong Gutenberg

Khối văn bản Gutenberg cho phép bạn chỉnh sửa màu văn bản và nền. Để thực hiện việc này, hãy mở khối bạn muốn sửa đổi và nhấp vào tab Cài đặt màu trong phần Khối ở bên phải màn hình

Phông chữ WordPress không thay đổi
Tab cài đặt màu

Từ đây bạn có thể chỉnh sửa màu nền và màu chữ cho khối văn bản

Phông chữ WordPress không thay đổi
Màu tùy chỉnh trong một khối

Lưu ý rằng WordPress sẽ cảnh báo bạn nếu sự kết hợp màu sắc bạn sử dụng không tốt cho khả năng truy cập, chẳng hạn như trong ví dụ tôi đã sử dụng ở trên. Tránh sự cám dỗ để quá nhiệt tình với màu sắc của bạn – sau tất cả, bạn đã chọn chủ đề của mình vì thiết kế màu sắc của nó phù hợp với trang web của bạn và việc thêm nhiều màu sắc hơn có thể khiến nó trông sặc sỡ

Nếu bạn nhấp vào tab Nâng cao bên dưới tab Cài đặt màu, bạn cũng có thể thêm một lớp vào khối đó, sau đó bạn có thể tạo kiểu cho lớp này trong Tùy biến hoặc biểu định kiểu của bạn. Vì vậy, ví dụ: nếu bạn đã thêm một lớp

https://fonts.googleapis.com/css?family=Raleway
6 vào khối của mình, thì bạn có thể tạo kiểu cho nó bằng cách sử dụng lớp đó

Thay đổi màu phông chữ trong Trình chỉnh sửa cổ điển

Thanh công cụ của trình soạn thảo cổ điển cho phép bạn thay đổi màu của bất kỳ văn bản nào bạn chọn. Vì vậy, bạn có thể chọn một từ riêng lẻ và thay đổi màu sắc của nó. Dưới đây tôi đã thực hiện một câu màu đỏ

Phông chữ WordPress không thay đổi
Thay đổi màu sắc trong trình chỉnh sửa cổ điển

Mặc dù về mặt lý thuyết, điều này mang lại cho bạn rất nhiều sự linh hoạt, nhưng hãy cẩn thận khi lạm dụng nó. Nếu bạn bắt đầu thêm nhiều màu hơn vào văn bản của mình, điều đó có thể dẫn đến một trang web khó đọc và không tốt cho khả năng truy cập

Thay đổi màu phông chữ trong Customizer

Nếu chủ đề của bạn bao gồm các tùy chọn để thay đổi bảng màu của trang web, thì đây là nơi tốt nhất để làm điều đó

Ví dụ: trong trang web bên dưới, tôi đang sử dụng một chủ đề cho phép tôi chọn bảng màu mới cho toàn bộ chủ đề. Điều này giúp đảm bảo các màu mới phối hợp ăn ý và thống nhất với nhau

Phông chữ WordPress không thay đổi
Chỉnh sửa bảng màu trong Customizer

Các tùy chọn cho điều này sẽ thay đổi tùy theo chủ đề của bạn – một số chủ đề cho phép bạn nhắm mục tiêu các tiêu đề, liên kết và các yếu tố khác cũng như thay đổi màu sắc của chúng

Nếu bạn muốn nhắm mục tiêu các phần tử cụ thể để thay đổi màu của chúng nhưng đây không phải là một tùy chọn với chủ đề của bạn, bạn có thể thêm CSS trong Trình tùy chỉnh để thực hiện việc này

Chọn Tùy chỉnh > CSS bổ sung và nhập CSS của bạn vào hộp văn bản

Ví dụ: nếu bạn muốn thay đổi màu của tiêu đề

https://fonts.googleapis.com/css?family=Raleway
0, bạn nhập

3

Nếu cách đó không hiệu quả, bạn có thể cần thêm CSS cụ thể hơn. Trong chủ đề của tôi, màu sắc cho liên kết tiêu đề trang web được mã hóa bằng cách sử dụng

https://fonts.googleapis.com/css?family=Raleway
8ID, vì vậy tôi cần thêm CSS này

4
Phông chữ WordPress không thay đổi
CSS bổ sung – màu sắc

Thay thế màu tôi đã sử dụng ở trên bằng màu của riêng bạn

Khi bạn hài lòng với những thay đổi của mình, hãy nhấp vào nút Xuất bản

Thay đổi màu phông chữ trong biểu định kiểu của bạn

Đối với các kiểu phông chữ, bạn cũng có thể chỉnh sửa biểu định kiểu của chủ đề (hoặc tạo một chủ đề con) để thay đổi màu phông chữ

Thay đổi màu sắc với màu sắc. Dưới đây tôi đang thay đổi màu chính cho văn bản trang web của mình, sử dụng phần tử

https://fonts.googleapis.com/css?family=Raleway
9

5

Đảm bảo rằng bạn ghi đè bất kỳ kiểu dáng hiện có nào cho các thành phần giống nhau và bạn cũng tạo kiểu cho bất kỳ thành phần nào kế thừa kiểu dáng đó nếu bạn muốn chúng có màu khác. Tất cả văn bản sẽ kế thừa màu sắc của phần tử nội dung trừ khi phần tử đó có kiểu riêng

Thay đổi kích thước phông chữ trong WordPress

Vì lý do trợ năng, bạn có thể quyết định muốn phông chữ của mình lớn hơn phông chữ theo mặc định trong chủ đề của bạn. Hoặc bạn có thể quyết định các tiêu đề trong khu vực widget của mình quá nhỏ, chẳng hạn

Thay đổi kích thước phông chữ trong Gutenberg

Với trình chỉnh sửa Gutenberg, bạn có thể thay đổi kích thước của văn bản trong mỗi khối

Chọn khối rồi nhấn vào tab Cài đặt văn bản trong menu Khối bên phải màn hình. Bạn có thể làm cho văn bản trong khối nhỏ hơn hoặc lớn hơn, như hình bên dưới

Phông chữ WordPress không thay đổi
Chỉnh sửa kích thước phông chữ trong Gutenberg

Coi chừng làm điều này quá nhiều. nếu tất cả các đoạn trên trang của bạn có kích thước khác nhau, nó sẽ trông rời rạc và khó đọc

Thay đổi kích thước phông chữ trong Trình chỉnh sửa cổ điển

Trình chỉnh sửa cổ điển không cung cấp cho bạn tùy chọn để chọn văn bản cụ thể và thay đổi kích thước của nó. vì vậy nếu bạn cần tính năng này, bạn sẽ cần nâng cấp lên Gutenberg. Xin lỗi

Thay đổi kích thước phông chữ trong Customizer

Tùy thuộc vào chủ đề của bạn, bạn có thể có tùy chọn thay đổi kích thước phông chữ trong Tùy biến, thay đổi kích thước phông chữ cho toàn bộ trang web hoặc nhắm mục tiêu tiêu đề và văn bản nội dung

Nếu chủ đề của bạn không có tùy chọn Tùy chỉnh để thay đổi kích thước phông chữ, nhưng bạn có thể sử dụng tùy chọn CSS bổ sung. Chuyển đến Tùy chỉnh > CSS bổ sung rồi nhập CSS vào hộp

Dưới đây tôi đang làm cho các tiêu đề trong khu vực widget lớn hơn, với CSS này

6
Phông chữ WordPress không thay đổi
Tạo kiểu cho kích thước phông chữ bằng CSS bổ sung

Có lẽ đó là một chút quá lớn, nhưng nó cung cấp cho bạn ý tưởng chung

Thay đổi kích thước phông chữ trong biểu định kiểu của bạn

Thay đổi kích thước phông chữ trong biểu định kiểu của bạn hoạt động theo cách tương tự như thay đổi bất kỳ kiểu dáng nào khác cho phông chữ của bạn

Nếu bạn muốn thay đổi kích thước của tất cả văn bản trong trang web của mình, bạn sẽ sử dụng phần tử

https://fonts.googleapis.com/css?family=Raleway
9

7

Đối với phần tử

https://fonts.googleapis.com/css?family=Raleway
9, bạn sử dụng pixel, nhưng đối với các phần tử khác, bạn sử dụng
function kinsta_add_google_fonts() {
 wp_register_style( 'googleFonts', 'https://fonts.googleapis.com/css?family=Raleway');
 wp_enqueue_style( 'googleFonts');
}
add_action( 'wp_enqueue_scripts', 'kinsta_add_google_fonts' );
2 vì vậy kích thước tương ứng với kích thước của phần tử
https://fonts.googleapis.com/css?family=Raleway
9

8

Hãy nhớ rằng nếu bạn định thay đổi phông chữ trong biểu định kiểu chủ đề của mình, trước tiên hãy kiểm tra nó trên một trang web phát triển hoặc dàn dựng để bạn không gặp rủi ro làm hỏng trang web trực tiếp của mình

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

Cho dù bạn đang sử dụng phông chữ trên web hay phông chữ được lưu trữ cục bộ, bạn nên làm mọi thứ có thể để tối ưu hóa phông chữ của mình

Ở đây tôi sẽ cung cấp cho bạn một số mẹo để tối ưu hóa phông chữ của bạn, cả về tốc độ và thiết kế

Tối ưu hóa phông chữ cho hiệu suất

Nếu bạn đang sử dụng phông chữ web trên trang web của mình, bạn sẽ muốn làm mọi thứ có thể để đảm bảo rằng chúng được gửi đến các trang của bạn nhanh nhất có thể và thực tế là chúng được lưu trữ ở nơi khác không làm chậm mọi thứ

  • Sử dụng bộ nhớ đệm để đảm bảo các trang không cần phải xây dựng lại mỗi khi chúng được tải. Các gói lưu trữ Kinsta đi kèm với bộ nhớ đệm tích hợp
  • Sử dụng nhà cung cấp phông chữ web cung cấp phông chữ bằng Mạng phân phối nội dung hoặc CDN. Google Fonts thực hiện việc này và tăng tốc độ phân phối phông chữ
  • Chỉ sử dụng những phông chữ bạn cần. Đừng liệt kê các biến thể của phông chữ (trọng lượng, kiểu) mà bạn sẽ không sử dụng trong biểu định kiểu của mình. Nếu sau này bạn thấy mình cần chúng, bạn luôn có thể thêm chúng sau đó
  • Nếu sử dụng phông chữ web, hãy đảm bảo bạn sắp xếp chúng đúng cách. Không sử dụng dòng @import trong biểu định kiểu của bạn, ngay cả khi đây là điều mà nhà cung cấp phông chữ web yêu cầu bạn làm
  • When adding CSS manually, add it to your theme’s stylesheet and not to the section of your header.php file. This is one reason why it’s better practice to code the CSS manually into your theme rather than using the Customizer or a block, as both of those will add inline CSS to the page instead of adding it to the stylesheet.
  • Cân nhắc sử dụng nội tuyến CSS để giảm thời gian tải trang thêm vài mili giây. Đây là quy trình sử dụng mã hóa base64 để thêm CSS từ biểu định kiểu của bạn vào trang trước khi tải, giúp trình duyệt không phải tải thêm tệp. Có vẻ như phản trực giác khi đưa ra lời khuyên ở trên về việc không viết CSS nội tuyến, nhưng nó vẫn hoạt động từ một tệp CSS riêng biệt và không có nghĩa là mã hóa CSS nội tuyến theo cách thủ công. Nếu bạn đang tải nhiều phông chữ, nội tuyến có thể tăng tốc trang web của bạn một chút
  • Sử dụng để giảm kích thước biểu định kiểu của bạn. Điều này có thể dễ dàng thực hiện nếu bạn là khách hàng của Kinsta bằng cách tận dụng tính năng rút gọn mã nằm ngay trong bảng điều khiển MyKinsta. Điều này cho phép khách hàng kích hoạt tính năng thu nhỏ CSS và JavaScript tự động chỉ bằng một cú nhấp chuột đơn giản, tăng tốc trang web của họ mà không tốn công sức thủ công
  • Nếu bạn đang lưu trữ cục bộ phông chữ, chỉ tải lên các tệp dành cho phông chữ cũng như trọng lượng và kiểu phông chữ bạn cần. Chỉ thêm những biến thể mà bạn cần bằng cách sử dụng khai báo @font-face
  • Cân nhắc sử dụng CDN để lưu trữ phông chữ của riêng bạn thay vì lưu trữ chúng trên máy chủ của riêng bạn
  • Khi lưu trữ phông chữ của riêng bạn, hãy bao gồm các định dạng bổ sung. woff2, woff, ttf và eot. Trình duyệt sau đó có thể chọn phiên bản sẽ tải nhanh nhất
  • Nếu bạn đang sử dụng một phông chữ khác cho tiêu đề trang web của mình, hãy chỉ liệt kê các ký tự bạn cần thay vì toàn bộ thư viện phông chữ

Vì vậy, nếu tiêu đề trang web của bạn là Kinsta, bạn có thể cải thiện hiệu suất nhỏ bằng cách tạo biểu định kiểu như thế này

9

Tối ưu hóa phông chữ cho thiết kế

Cùng với việc tối ưu hóa hiệu suất phông chữ của bạn, bạn cũng nên đảm bảo rằng chúng được tối ưu hóa trực quan. rằng chúng phù hợp tốt với thiết kế trang web của bạn và với các tài liệu ngoại tuyến của bạn

Điều này đặc biệt xảy ra nếu bạn sử dụng một plugin hoặc một chủ đề con để thêm các phông chữ bổ sung lên trên những phông chữ đã có sẵn trong chủ đề của bạn. Chủ đề của bạn có nguy cơ trông lộn xộn nếu có quá nhiều phông chữ với quá nhiều màu sắc và kiểu dáng

Trước khi bạn thêm phông chữ bổ sung vào trang web của mình, hãy xem xét những điều sau

  • Phông chữ mới có phù hợp với phông chữ hiện tại của bạn không?
  • Nếu bạn cần khớp một phông chữ đã được sử dụng cho các tài liệu in nhưng không thể sử dụng cùng một phông chữ làm phông chữ web, hãy thử tìm một phông chữ phù hợp nhất có thể trên Google Fonts
  • Các phông chữ bạn đã chọn có phù hợp với thương hiệu của bạn không?
  • Nếu bạn đang thay đổi màu của phông chữ, hãy thử sử dụng các màu đã có trong thiết kế chủ đề của bạn hoặc phối hợp với chúng. Thêm quá nhiều màu sắc sẽ khiến trang web của bạn trông lòe loẹt và thiếu chuyên nghiệp
  • Nếu bạn đang cố chọn một cặp phông chữ trên Google Fonts, hãy thử sử dụng một dịch vụ như fontpair để tìm hai phông chữ hoạt động tốt với nhau

Các phông chữ bạn sử dụng trong thiết kế của mình sẽ có tác động đến ấn tượng mà khách truy cập nhận được khi họ truy cập trang web của bạn. Hãy chắc chắn rằng bạn đã xem xét điều này và chọn phông chữ sẽ củng cố thương hiệu của bạn

Làm việc với phông chữ biến

Phông chữ biến đổi là một loại phông chữ mới giúp thêm nhiều phông chữ hơn vào trang web của bạn hiệu quả hơn

Chúng cho phép lưu trữ nhiều thông tin hơn trong một tệp phông chữ, để nếu bạn muốn các biến thể trên phông chữ của mình (đậm, nghiêng, v.v. ), bạn không phải tải nhiều tệp phông chữ mà chỉ có thể tải một tệp

Đối với một phông chữ có nhiều trọng lượng, kiểu và độ nghiêng phông chữ, điều này có thể tiết kiệm rất nhiều dung lượng tệp và làm cho quá trình xử lý phông chữ hoặc thêm nó qua @fontface cũng dễ dàng hơn

Các phông chữ biến đổi được hỗ trợ trong các phiên bản mới nhất của Chrome, Edge, Firefox và Safari nhưng không được hỗ trợ bởi các trình duyệt cũ hơn; . Và chưa có nhiều phông chữ biến đổi. Google Fonts không bao gồm bất kỳ Phông chữ nào, nhưng Google hỗ trợ thông số kỹ thuật, vì vậy có khả năng chúng sẽ được thêm vào theo thời gian

Các nhà phát triển phông chữ đang nỗ lực tạo ra nhiều phông chữ biến đổi hơn và cải thiện độ tin cậy của chúng, vì vậy, rất đáng để theo dõi tiến trình để bạn có thể sử dụng các phông chữ biến đổi nhằm tối ưu hóa phông chữ của mình sau khi chúng trở nên ổn định hơn

Phông chữ được coi là đương nhiên nhưng chúng rất quan trọng đối với BẤT KỲ trang web nào (không có ngoại lệ). Tìm hiểu cách thay đổi phông chữ, cỡ chữ và màu chữ trong WordPress. 🎨👨‍👦Nhấp để Tweet

Tóm lược

Thay đổi phông chữ trên trang web WordPress của bạn không phải là một nhiệm vụ đơn giản. Bạn có các khả năng khác nhau để lựa chọn

  1. Sử dụng phông chữ web bằng cách cài đặt plugin
  2. Sử dụng phông chữ web bằng cách mã hóa chúng vào chủ đề của bạn và xếp hàng chúng
  3. Lưu trữ phông chữ của bạn

Sau đó, bạn nên tập trung vào cách tối ưu hóa phông chữ của mình để có hiệu suất tốt hơn. Nếu bạn làm theo các mẹo trong hướng dẫn này, bạn không chỉ có thể thay đổi phông chữ trong WordPress mà còn có nhiều quyền kiểm soát hơn đối với chúng trong chủ đề của mình

Bạn muốn giải mã bố cục trang hoặc blog của mình để khiến người đọc tập trung vào nội dung của bạn? . Cách xóa thanh bên trong WordPress (4 phương pháp)


Nhận tất cả các ứng dụng, cơ sở dữ liệu và trang web WordPress của bạn trực tuyến và dưới một mái nhà. Nền tảng đám mây hiệu suất cao, đầy đủ tính năng của chúng tôi bao gồm

  • Dễ dàng thiết lập và quản lý trong bảng điều khiển MyKinsta
  • Hỗ trợ chuyên gia 24/7
  • Mạng và phần cứng Google Cloud Platform tốt nhất, được cung cấp bởi Kubernetes để có khả năng mở rộng tối đa
  • Tích hợp Cloudflare cấp doanh nghiệp cho tốc độ và bảo mật
  • Tiếp cận đối tượng toàn cầu với tối đa 35 trung tâm dữ liệu và hơn 275 PoP trên toàn thế giới

Hãy tự kiểm tra với $20 trong tháng đầu tiên của Lưu trữ ứng dụng hoặc Lưu trữ cơ sở dữ liệu. Khám phá kế hoạch của chúng tôi hoặc nói chuyện với bộ phận bán hàng để tìm thấy sự phù hợp nhất của bạn

Làm cách nào để thay đổi phông chữ trên WordPress?

Cách thay đổi phông chữ trong WordPress .
Đăng nhập vào tài khoản WordPress của bạn. .
Nhấp vào Giao diện ở thanh bên trái
Sau đó nhấp vào Tùy chỉnh
Nhấp vào Phông chữ trong bảng điều khiển bên trái. .
Chọn tiêu đề và phông chữ cơ sở của bạn. .
Bạn cũng có thể thay đổi kích thước phông chữ bằng cách nhấp vào nút “Kích thước bình thường” trong trình đơn thả xuống Tiêu đề

Tại sao phông chữ văn bản của tôi không thay đổi trong Elementor?

Xóa tất cả bộ đệm . bộ đệm của trình duyệt của bạn, bộ đệm của các plugin khác, bộ đệm của máy chủ (nếu có thể). Nếu sự cố vẫn tiếp diễn, hãy hủy kích hoạt tất cả các plugin ngoài Elementor. Nếu điều này hữu ích, hãy kích hoạt lại từng cái một để tìm ra thủ phạm.