Cách thêm phông chữ tùy chỉnh vào trang web WordPress – Các phông chữ bạn sử dụng không chỉ ảnh hưởng đến bản trình bày website của bạn, chúng còn làm cho nó nổi bật so với các website khác và khiến nội dung của bạn dễ đọc hơn. Chọn các phông chữ giống như mọi người khác có thể là 1 đặt cược an toàn, nhưng đáng để bạn thêm các phông chữ tùy chỉnh vào WordPress.
Mặc dù WordPress bao gồm các tùy chọn phông chữ khác nhau, nhưng có vô số cách để lựa chọn. Nếu bạn biết cách bao gồm các phông chữ tùy chỉnh trên trang web của mình, bạn sẽ dễ chọn từ hàng ngàn tùy chọn thú vị. Điều này sẽ cho phép bạn tìm 1 phông chữ phù hợp với đối tượng và thính giả của bạn.
Trong bài viết này, chúng ta sẽ nói về phông chữ tùy chỉnh là gì và nơi bạn tìm được 1 số lựa chọn tuyệt vời. Sau đó, chúng tôi sẽ giới thiệu ba phương pháp bạn nên dùng để tải phông chữ tùy chỉnh lên WordPress. Bắt đầu nào!
Hiểu phông chữ tùy chỉnh là gì (và tại sao bạn muốn sử dụng chúng)
Thuật ngữ ‘phông chữ tùy chỉnh’ là khá rộng. Tuy nhiên, vì chúng ta đang đề cập tới WordPress, nên chúng tôi sẽ dùng nó để chỉ bất kỳ kiểu chữ nào mà hệ thống quản lý nội dung (CMS) không bao gồm ngoài hộp. Có hàng ngàn tùy chọn phông chữ tùy chỉnh mà bạn tìm thấy trực tuyến và nói chung, không có gì ngăn cản bạn sử dụng bất kỳ tùy chọn nào trong số đó.
Mặc dù vậy, hãy ghi nhớ – các phông chữ bạn chọn không chỉ mang tính thẩm mỹ. Chúng cũng nên đáp ứng một số tiêu chí bổ sung:
- Mỗi phông chữ của bạn phải dễ đọc.
- Nó cần phải phù hợp với phong cách chung của trang web và các phông chữ khác mà bạn sử dụng .
- Chữ của bảng chữ cái nên nhìn tốt ở cả kích thước lớn và nhỏ, vì bạn cần lưu ý phản hồi của thiết bị di động .
Ngoài những cân nhắc kỹ thuật này, phông chữ cung cấp cho bạn một cách bổ sung để thể hiện phong cách trang web của bạn. Họ sẽ là một phần trong thương hiệu của bạn và theo thời gian, người dùng đến để liên kết họ với website và doanh nghiệp của bạn. Vì vậy, bạn sẽ muốn xem xét lựa chọn của bạn rất cẩn thận.
Nơi bạn có thể tìm thấy phông chữ tùy chỉnh cho trang web WordPress của mình
Nếu bạn thực hiện tìm kiếm nhanh ‘phông chữ miễn phí’ với việc dùng bất cứ công cụ tìm kiếm nào ngay bây giờ, bạn sẽ tìm thấy hàng trăm trang với nhiều lựa chọn để chọn:
Tuy nhiên, vấn đề là vô số trang web ‘phông chữ miễn phí’ không có xu hướng đạt tiêu chuẩn cao khi nói đến việc lựa chọn các dịch vụ của họ. Bạn có thể tìm thấy 1 số đồ trang sức, nhưng trong nhiều tình huống, chúng cũng sẽ có đầy đủ các phông chữ mà bạn sẽ không bị hạn chế khi sử dụng ngay cả khi bạn đang làm việc trên hồ sơ MySpace năm 2005.
May mắn thay, có rất nhiều kho font chữ tuyệt vời mà làm đi đến độ dài lớn để quản các bộ sưu tập của họ. Một trong các mục yêu thích của chúng tôi là Google Fonts, cung cấp hơn 900 họ phông chữ bằng nhiều ngôn ngữ, tất cả đều miễn phí:
Một tùy chọn tuyệt vời khác là Adobe Fonts (trước đây là Typekit ), cung cấp hơn 1.700 họ phông chữ để lựa chọn. Mặc dù vậy, hãy ghi nhớ – để truy cập chúng, bạn sẽ cần đăng ký Creative Cloud (mọi tầng sẽ làm). Nếu bạn là người dùng Adobe, tức là bạn đã có quyền truy cập vào toàn bộ bộ sưu tập phông chữ:
Chỉ riêng hai nguồn này sẽ cung cấp cho bạn nhiều tùy chọn để lựa chọn. Hãy ghi nhớ khi có quyết định, mỗi phông chữ bạn chọn cần tương thích với phần còn lại của phong cách trang web và dễ đọc. Khi bạn đã tìm thấy 1 vài phông chữ bạn thích, tất cả những gì còn lại là thêm chúng vào trang web.
Cách thêm phông chữ tùy chỉnh vào trang web WordPress của bạn (ba phương pháp)
Khi nói đến phông chữ tùy chỉnh, WordPress đưa cho bạn 1 số cách mà bạn có thể thực hiện các tùy chọn bạn muốn. Chúng ta hãy xem xét từng thứ liên quan, vì vậy bạn có thể chọn phương pháp tốt nhất với mình.
- Chỉnh sửa tập tin chủ đề của bạn
Nếu bạn không muốn tải các tệp phông chữ lên website của mình theo cách thủ công, bạn luôn được ‘nhập’ chúng từ kho lưu trữ của bên thứ ba. Ví dụ, với Google Fonts, bạn có thể mở bất kỳ trang phông chữ nào bạn muốn và nhấp vào Chọn Phông chữ này ở đầu màn hình:
Khi bạn làm điều đó, một menu mới sẽ xuất hiện bao gồm hai đoạn mã. Cái đầu tiên sẽ trông như thế này:
<link href=”https://fonts.googleapis.com/css?family=Roboto&display=swap” rel=”stylesheet”>
Mã này sẽ được đặt trong <head> thẻ của child theme của bạn header.php tập tin. Bạn có thể tìm thấy mục này trong thư mục của chủ đề trong thư mục public_html / wp-content / Themes .
Với dòng đó, bạn đang bảo WordPress nhập tùy chọn bạn đã chọn từ Google Fonts. Tuy nhiên, để sử dụng nó, bạn cũng cần mở biểu định kiểu của chủ đề con của bạn và chỉ định những yếu tố nào sẽ tận dụng phông chữ mới của bạn. Đây là mã mà nó sẽ trông như thế nào:
font-family: ‘Roboto’, sans-serif;
Xem thêm : Xây dựng một trang web đáp ứng chuyên nghiệp
Hãy nhớ rằng, bản định kiểu của chủ đề con của bạn phải nằm trong cùng thư mục với tệp header.php của nó . Điều đó có nghĩa là bạn có thể đảm nhiệm cả hai nhiệm vụ ở cùng một nơi và thực hiện các phông chữ mới chỉ trong vài phút.
- Tải tập tin phông chữ của bạn lên thư mục của chủ đề
Nếu bạn hoàn toàn tối ưu hóa hiệu suất, việc tải trực tiếp các tệp phông chữ lên website giúp bạn bớt 1 vài phần nghìn giây trong lúc tải. Tất nhiên, điều đầu tiên bạn cần là tệp phông chữ bạn muốn tải lên máy chủ của mình:
Vì WordPress không bao gồm thư mục phông chữ chuyên dụng , bạn sẽ muốn tạo 1 thư mục dùng ứng dụng khách FTP đáng tin cậy của mình. Bạn được thêm thư mục bất cứ đâu bạn muốn, nhưng bạn nên đặt nó trong thư mục chủ đề của mình để bạn theo dõi thư mục đó. Thiết lập nó ngay bây giờ và tải tập tin phông chữ của bạn lên thư mục mới:
Khi tệp đã được đặt, hãy mở biểu định kiểu của chủ đề con của bạn. Bạn sẽ cần gọi phông chữ đó để bạn sử dụng nó, thông qua 1 đoạn mã trông giống như thế này:
@font-face {
font-family: New Font;
src: url(https://www.yourwebsite.com/wp-content/themes//fonts/your-new-font.ttf);
font-weight: normal;
}
Vui lòng lưu ý tên họ phông chữ và URL ở trên là giữ chỗ, bạn sẽ cần thay thế bằng thông tin phù hợp.
Khi bạn đã nhập mã này, chưa đóng biểu định kiểu của chủ đề. Bạn vẫn cần định cấu hình các thành phần nào sẽ sử dụng phông chữ mới, với một số mã rất giống với những gì chúng ta đã xem trong phần trước:
.h1 site-title {
font-family: “New Font”, Arial, sans-serif;
}
Trong ví dụ này, chúng tôi đang định cấu hình các tiêu đề phụ H1 để sử dụng phông chữ mới. Tuy nhiên, bạn có thể thay thế bằng bất kỳ yếu tố nào khác mà bạn muốn hoặc nhiều yếu tố nếu bạn muốn sử dụng phông chữ ở nhiều nơi.
- Sử dụng plugin
Như thường lệ, cách dễ nhất để thực hiện chức năng mới trong WordPress là cài 1 plugin. Khi nói đến việc sử dụng phông chữ tùy chỉnh, có rất nhiều tùy chọn để chọn.
Ví dụ: nếu bạn muốn dùng Google Fonts, chúng tôi khuyên bạn nên dùng plugin Google Fonts cho WordPress. Sau khi hoàn tất công cụ này, bạn sẽ được chọn từ toàn bộ danh mục Google Fonts cho các trang và bài đăng của mình mà chẳng cần thêm bất kỳ mã nào vào website của bạn:
Mặt khác, nếu bạn muốn sử dụng bất kỳ tệp phông chữ nào và không giới hạn bản thân trong một kho lưu trữ duy nhất, Phông chữ tùy chỉnh là công cụ bạn nên xem xét:
Với plugin này, bạn tải phông chữ lên website ngay từ bảng điều khiển và sử dụng Trình tùy chỉnh để chọn vị trí và thời điểm sử dụng chúng. Một trong các plugin này giúp bạn dễ dàng thêm phông chữ tùy chỉnh mới vào trang web.
Phần kết luận
Nếu bạn chú ý đến các phông chữ mà các trang web sử dụng, bạn sẽ nhận thấy rằng nhiều trong số chúng dính vào cùng một vài lựa chọn thử và đúng. Một số phông chữ được đặt cược khá an toàn khi nói đến khả năng đọc và khả năng truy cập của người dùng . Tuy nhiên, với hàng ngàn tùy chọn để lựa chọn – cả miễn phí và trả phí – thật đáng để tìm kiếm một lựa chọn phù hợp với phong cách và đối tượng trang web của bạn một cách hoàn hảo.
Xem thêm : Tạo Web
Về cách tải phông chữ tùy chỉnh lên WordPress, bạn nên dùng ba cách tiếp cận khác nhau:
- Chỉnh sửa tập tin chủ đề của bạn.
- Tải tập tin của phông chữ vào thư mục chủ đề của bạn.
- Sử dụng plugin phông chữ tùy chỉnh WordPress.
Bạn có câu hỏi nào về loại phông chữ bạn nên dùng trên website của mình? Hãy nói với chúng tôi trong phần bình luận phía dưới!
