Bạn có muốn thêm phông chữ WordPress tùy chỉnh không? Với các phông chữ tùy chỉnh, bạn có thể sử dụng một sự kết hợp đẹp mắt của các phông chữ khác nhau trên trang web của mình để nâng cao kiểu chữ và trải nghiệm người dùng.
Ngoài việc tìm kiếm tốt, phông chữ tùy chỉnh cũng có thể giúp bạn cải thiện khả năng đọc, tạo hình ảnh thương hiệu và tăng thời gian người dùng dành cho trang web của bạn.
Trong bài viết này, chúng tôi sẽ chỉ cho bạn cách thêm phông chữ tùy chỉnh vào WordPress bằng Google Fonts, TypeKit và phương pháp CSS3 @ Font-Face.
lưu ý: Tải quá nhiều phông chữ có thể làm chậm trang web của bạn. Chúng tôi khuyên bạn nên chọn hai phông chữ và sử dụng chúng trên trang web của mình. Chúng tôi cũng sẽ chỉ cho bạn cách tải chúng đúng cách mà không làm chậm trang web của bạn.
Trước khi chúng tôi xem cách thêm phông chữ tùy chỉnh vào WordPress, chúng ta hãy xem để tìm phông chữ tùy chỉnh mà bạn có thể sử dụng.
Cách tìm phông chữ tùy chỉnh để sử dụng trong WordPress
Đài phun nước từng đắt tiền, nhưng không còn. Có nhiều nơi để tìm các phông chữ web miễn phí tuyệt vời như Google Fonts, Typekit, FontSquirrel và Font.com.
Nếu bạn không biết cách trộn và kết hợp các phông chữ, hãy thử Ghép cặp. Giúp các nhà thiết kế kết hợp các phông chữ Google đẹp.
Hãy nhớ rằng sử dụng quá nhiều phông chữ tùy chỉnh sẽ làm chậm trang web của bạn khi bạn chọn phông chữ của mình. Đó là lý do tại sao bạn phải chọn hai phông chữ và sử dụng chúng trong suốt thiết kế của mình. Điều này cũng sẽ cung cấp sự nhất quán trong thiết kế của bạn.
Video Hướng dẫn
Đăng ký WPBeginner
Nếu bạn không thích video hoặc thích hướng dẫn bằng văn bản, hãy tiếp tục đọc.
Thêm phông chữ WordPress tùy chỉnh từ Google Fonts
Google Fonts là thư viện phông chữ lớn nhất, miễn phí và được sử dụng nhiều nhất trong số các nhà phát triển trang web. Có một số cách để thêm và sử dụng phông chữ Google trong WordPress.
phương pháp 1: Thêm phông chữ tùy chỉnh với plugin Google Easy Fonts
Nếu bạn muốn thêm và sử dụng phông chữ Google vào trang web của mình, phương pháp này là cách dễ nhất và được khuyến nghị cho người mới bắt đầu.
Điều đầu tiên cần làm là cài đặt và kích hoạt plugin Easy Google Fonts. Để biết thêm thông tin, hãy xem hướng dẫn từng bước của chúng tôi về cách cài đặt plugin WordPress.
Sau khi kích hoạt bạn có thể đi đến Ngoại hình »Tùy biến phụ. Điều này sẽ mở giao diện tùy biến chủ đề trực tiếp, nơi bạn thấy phần Kiểu chữ mới.
Bằng cách nhấp vào Kiểu chữ, bạn sẽ thấy các phần khác nhau của trang web nơi bạn có thể sử dụng phông chữ của Google. Chỉ cần nhấp vào "Chỉnh sửa nguồn" trong phần bạn muốn chỉnh sửa.
Trong phần họ phông chữ, bạn có thể chọn phông chữ Google bạn muốn sử dụng trên trang web của mình. Bạn cũng có thể chọn phông chữ, kích thước, điền, lề và nhiều hơn nữa.
Tùy thuộc vào chủ đề của bạn, số phần ở đây có thể bị giới hạn và bạn có thể không thể thay đổi phông chữ cho nhiều khu vực khác nhau trên trang web của mình.
Để khắc phục điều này, plugin cũng cho phép bạn tạo các điều khiển của riêng mình và sử dụng chúng để thay đổi phông chữ trên trang web của bạn.
Đầu tiên bạn phải ghé thăm Cài đặt »Google Fonts và nhập tên cho điều khiển phông chữ của bạn. Sử dụng một cái gì đó để nhanh chóng hiểu nơi bạn sẽ sử dụng kiểm soát nguồn này.
Sau đó nhấp vào nút "Tạo điều khiển phông chữ" và bạn sẽ được nhắc nhập bộ chọn CSS.
Bạn có thể thêm các phần tử HTML mà bạn muốn nhắm mục tiêu (ví dụ: h1, h2, p, blockquote) hoặc sử dụng các lớp CSS.
Bạn có thể sử dụng công cụ kiểm tra trong trình duyệt của mình để tìm hiểu các lớp CSS mà khu vực cụ thể bạn muốn thay đổi đang sử dụng.
Bây giờ bấm vào "Lưu kiểm soát nguồn" để lưu trữ cài đặt của bạn. Bạn có thể tạo nhiều trình điều khiển phông chữ như bạn cần cho các phần khác nhau của trang web của bạn.
Để sử dụng các trình điều khiển phông chữ này, bạn phải đi đến Ngoại hình »Tùy biến và nhấp vào tab Kiểu.
Trong typography bây giờ bạn sẽ thấy tùy chọn "typography chuyên đề". Nhấp vào nó sẽ hiển thị các điều khiển phông chữ tùy chỉnh bạn đã tạo trước đó. Bây giờ bạn có thể nhấp vào nút chỉnh sửa để chọn phông chữ và giao diện của điều khiển này.
Đừng quên nhấp vào nút Lưu hoặc Xuất bản để lưu các thay đổi của bạn.
phương pháp 2: Thêm thủ công phông chữ Google vào WordPress
Phương pháp này yêu cầu bạn thêm mã vào các tệp chủ đề WordPress của mình. Nếu trước đây bạn chưa làm như vậy, hãy xem hướng dẫn của chúng tôi về cách sao chép và dán mã vào WordPress.
Đầu tiên, hãy truy cập thư viện phông chữ của Google và chọn phông chữ bạn muốn sử dụng. Sau đó nhấp vào nút sử dụng nhanh bên dưới phông chữ.
Trên trang phông chữ, bạn sẽ thấy các kiểu có sẵn cho phông chữ đó. Chọn các kiểu bạn muốn sử dụng trong dự án của bạn và sau đó nhấp vào nút thanh bên ở trên cùng.
Sau đó, bạn cần chuyển sang tab "Nhúng" trong thanh bên để sao chép mã nhúng.
Có hai cách để thêm mã này vào trang web WordPress của bạn.
Trước tiên, bạn chỉ cần chỉnh sửa tệp header.php của chủ đề và dán mã trước
nhãn.
Tuy nhiên, nếu bạn không biết mã chỉnh sửa trong WordPress, bạn có thể sử dụng plugin để thêm mã này.
Chỉ cài đặt và bật các plugin Chèn Header và Footer. Để biết thêm thông tin, hãy xem hướng dẫn từng bước của chúng tôi về cách cài đặt plugin WordPress.
Sau khi kích hoạt, đi đến Cài đặt »Chèn đầu trang và chân trang và dán mã nhúng vào hộp "Tập lệnh trong Tiêu đề".
Đừng quên nhấp vào nút Lưu để lưu các thay đổi của bạn. Plugin hiện sẽ bắt đầu tải mã nhúng Google Font trên mỗi trang trên trang web của bạn.
Bạn có thể sử dụng phông chữ này trong biểu định kiểu của chủ đề như thế này:
.h1 trang web-title {font-family: 'Open Sans', Arial, sans-serif; }
Để biết hướng dẫn chi tiết hơn, hãy xem hướng dẫn của chúng tôi về cách thêm phông chữ Google vào chủ đề WordPress.
Thêm phông chữ WordPress tùy chỉnh với Typekit
Adobe Fonts Typekit là một tài nguyên miễn phí và cao cấp khác cho các phông chữ tuyệt vời mà bạn có thể sử dụng trong các dự án thiết kế của mình. Họ có một thuê bao trả phí, cũng như một gói miễn phí hạn chế mà bạn có thể sử dụng.
Chỉ cần đăng ký tài khoản phông chữ Adobe và truy cập phần tìm kiếm phông chữ Từ đây bạn phải nhấp vào nút để chọn nguồn và tạo dự án.
Sau đó, bạn thấy mã nhúng với ID dự án của bạn. Nó cũng chỉ ra cách sử dụng phông chữ trong CSS của chủ đề của bạn.
Bạn cần sao chép và dán mã này vào
phần của trang web của họ.
Có hai cách để thêm mã này vào trang web WordPress của bạn.
Trước tiên, bạn chỉ cần chỉnh sửa tệp header.php của chủ đề và dán mã trước
nhãn.
Tuy nhiên, nếu bạn không biết mã chỉnh sửa trong WordPress, bạn có thể sử dụng plugin để thêm mã này.
Chỉ cài đặt và bật các plugin Chèn Header và Footer.
Sau khi kích hoạt, đi đến Cài đặt »Chèn đầu trang và chân trang và dán mã nhúng vào hộp "Tập lệnh trong Tiêu đề".
Đó là nó, bây giờ bạn có thể sử dụng phông chữ Typekit mà bạn đã chọn trong mẫu chủ đề WordPress của mình như thế này:
h1 .site-title {font-family: gilbert, sans-serif; }
Để biết hướng dẫn chi tiết hơn, hãy xem hướng dẫn của chúng tôi về cách thêm phông chữ tuyệt vời vào WordPress với Typekit.
Thêm phông chữ WordPress tùy chỉnh với CSS3 @ font-face
Cách trực tiếp nhất để thêm phông chữ tùy chỉnh vào WordPress là thêm phông chữ bằng phương pháp CSS3 @ font-face. Phương pháp này cho phép bạn sử dụng bất kỳ phông chữ nào trên trang web của bạn.
Điều đầu tiên cần làm là tải xuống phông chữ bạn muốn ở định dạng web. Nếu bạn không có định dạng web cho phông chữ của mình, bạn có thể chuyển đổi nó với FontSquirrel Web Font Generator.
Khi bạn có các tệp phông chữ web, bạn phải tải chúng lên máy chủ lưu trữ WordPress của mình.
Nơi tốt nhất để tải phông chữ là trong thư mục "phông chữ" mới trong chủ đề hoặc chủ đề con của bạn.
Bạn có thể sử dụng FTP hoặc Trình quản lý tệp từ cPanel của mình để tải phông chữ.
Khi bạn đã tải lên phông chữ, bạn phải tải lên phông chữ trong biểu định kiểu của chủ đề bằng cách sử dụng quy tắc khuôn mặt phông chữ CSS3 như thế này:
@ font-face {font-family: Arvo; src: url (https://www.example.com/wp-content/theme/your-theme/fonts/Arvo-Regular.ttf); font-weight: bình thường; }
Đừng quên thay thế họ phông chữ và URL của bạn.
Sau đó, bạn có thể sử dụng phông chữ đó ở bất cứ đâu trên biểu định kiểu của chủ đề:
.h1 trang web-title {font-family: "Arvo", Arial, sans-serif; }
Tải phông chữ trực tiếp bằng CSS3 @ font-face không phải lúc nào cũng là giải pháp tốt nhất. Nếu bạn đang sử dụng phông chữ Google hoặc phông chữ bộ công cụ, tốt nhất nên phục vụ phông chữ trực tiếp từ máy chủ của bạn để có hiệu suất tối ưu.
Đó là nó, chúng tôi hy vọng bài viết này đã giúp bạn thêm phông chữ WordPress tùy chỉnh. Bạn cũng có thể xem hướng dẫn của chúng tôi về cách sử dụng phông chữ biểu tượng trong WordPress và cách thay đổi kích thước phông chữ trong WordPress.
Nếu bạn thích bài viết này, đăng ký kênh của chúng tôi YouTube để xem video hướng dẫn WordPress. Bạn cũng có thể tìm thấy chúng tôi tại Twitter và Facebook.
