Tại sao làm cho blog của bạn nhàm chán với phông chữ tiêu chuẩn? Hãy để blog của bạn nói về tính cách sôi nổi của bạn và các chủ đề mà nó bao gồm với nhiều phông chữ tùy chỉnh. Phông chữ tùy chỉnh là một tính năng tốt làm cho blog của bạn trông thích hơn những người khác.
Hãy Trung thực; Chúng tôi đều yêu thích blog và các trang web với các nguồn thích hợp. Họ không chỉ trang trí trang web, mà còn giúp thu hút người dùng đến nội dung của nó. Tuy nhiên, việc lựa chọn phông chữ WordPress tiêu chuẩn bị hạn chế và phụ thuộc vào chủ đề bạn đang sử dụng. Tin tốt là bạn có thể thêm chúng thủ công hoặc bằng các plugin chuyên dụng.
Và đây là hai câu hỏi phát sinh: nơi để có được phông chữ tùy chỉnh cho WordPress và Làm thế nào để cài đặt phông chữ tùy chỉnh trên trang web WordPress của bạn.
Hãy cùng tìm hiểu.
Tại sao tôi nên sử dụng phông chữ tùy chỉnh?
Ngày tháng trôi qua khi Times New Roman và Georgia được coi là nguồn duy nhất cho các văn bản trang web. Trong những năm gần đây, không gian phông chữ đã hoàn toàn thay đổi với sự xuất hiện của các phông chữ như Google Fonts và các phông chữ khác.
Ngày nay, có hàng trăm phông chữ miễn phí, thông tin và hỗ trợ đào tạo và các tài nguyên được thiết kế để thiết kế, có sẵn trên Internet. Không giống như Adobe Illustrator, Photoshop và các ứng dụng cổ điển khác, WordPress không cung cấp cho bạn toàn quyền kiểm soát phông chữ theo mặc định. Chỉ có một vài chủ đề chọn để hỗ trợ và sử dụng phông chữ tùy chỉnh.
Do đó, trong bài đăng này, bạn sẽ tìm hiểu cách tìm phông chữ tùy chỉnh phù hợp và cách sử dụng chúng trên trang web WordPress của bạn.
Tầm quan trọng của việc sử dụng phông chữ tùy chỉnh
Tại sao thay đổi phông chữ, thụt lề giữa các từ, khoảng cách dòng, khoảng cách chữ hoặc độ bão hòa phông chữ? Là như nó có thể, một số nghiên cứu cho thấy rằng typography cải thiện khả năng đọc hiểu.
Phần lớn phụ thuộc vào việc xây dựng các đài phun nước. Ở cấp độ ý thức và tiềm thức, mọi người đều đánh giá nội dung của một trang web theo thiết kế.
Thiết kế phông chữ ảnh hưởng đến độc giả, ngay cả khi họ không chú ý. Từ bỏ thiết kế phông chữ có nghĩa là từ bỏ phát triển chính nó! Tâm trạng của người đọc phụ thuộc vào nó. Phông chữ tạo điều kiện cho việc đọc hoặc buộc người dùng rời khỏi trang.
Tất cả các trình duyệt web bao gồm một bộ phông chữ mặc định. Điều này có nghĩa là nếu phông chữ không được chỉ định trong CSS của trang, phiên bản tiêu chuẩn sẽ được sử dụng. Bạn luôn có thể sử dụng các phông chữ mặc định, nhưng chúng làm phức tạp công việc của người dùng. Vì vậy, điều cần thiết là sử dụng một phông chữ tùy chỉnh. Nếu chủ đề của bạn không cung cấp cho bạn các tùy chọn để thay đổi phông chữ, nhiều trang web và công cụ có thể giúp bạn.
Google thay thế phông chữ
Nhiều bạn biết về phông chữ Google miễn phí. Có rất nhiều nơi mà bạn có thể tìm thấy phông chữ đẹp. Một số trong số họ là miễn phí cho sử dụng cá nhân. Nếu bạn cần sử dụng thương mại, bạn cần giấy phép. Phông chữ Google và phông chữ Adobe Edge là miễn phí. Vì vậy, chúng không phải là duy nhất. Và điều này không phù hợp với chúng tôi.
Đây là một số tài nguyên khác để tìm phông chữ Để sử dụng miễn phí và thương mại:
TemplateMonster – Trên trang web TemplateMonster Marketplace, bạn sẽ tìm thấy mọi thứ bạn cần cho thiết kế web. Ngoài ra còn có nhiều phông chữ và gói phông chữ để sử dụng cá nhân với một mức giá nhỏ. Ngoài ra, chúng được trình bày trong MỘT bộ phát triển web. Bộ sưu tập rất lớn và sáng tạo. Để giúp bạn chọn, tất cả các phông chữ được trình bày trong tài liệu quảng cáo hoặc khung. Mỗi phông chữ được trình bày với một giấy phép thương mại là tốt.
MyFonts: MyFonts hiện cung cấp nhiều lựa chọn phông chữ nhất trên thế giới. Tuy nhiên, giá ở đây cũng nằm trong phân khúc cao nhất. Vì vậy, nếu bạn có ngân sách eo hẹp, nó có thể không dành cho bạn.
FontSpring: Fontspring bán các phông chữ thanh lịch cho mục đích thương mại. Nhưng trong hầu hết mọi gia đình, phông chữ miễn phí 1-2 có thể được sử dụng cho mục đích cá nhân. Ngoài ra, có một phần riêng biệt với phông chữ miễn phí. Bộ sưu tập đang rung. Nhưng bạn nên nghiên cứu kỹ thông tin giấy phép cho một phông chữ cụ thể trước khi tải xuống.
Cufonfonts: Nó cũng là một bộ sưu tập lớn các nguồn khác nhau. Chọn bất kỳ, và bạn sẽ thấy một trang với thông tin chi tiết về nó. Có nhiều phông chữ miễn phí và chúng được chia thành các phần riêng biệt. các sistema Sắp xếp trên CufonFonts khá linh hoạt và thuận tiện. Ngoài ra, hỗ trợ Webfont được bao gồm.
Dafont: một bộ sưu tập có thể truy cập khác của 3.500 phông chữ miễn phí. Hầu hết chúng được thiết kế để chỉ sử dụng cá nhân. Một tính năng tốt của DaFont là một sistema của các thể loại. Bạn có thể chọn phông chữ theo phong cách truyện tranh, trò chơi video, cổ điển hoặc cách điệu như các ký tự Nhật Bản.
Sự lựa chọn của phông chữ là rất hấp dẫn bởi vì tất cả chúng đều đẹp. Nhưng bạn không nên chọn nhiều. Sử dụng không quá hai nguồn trên trang web. Sau đó, giao diện của trang web của bạn sẽ được nhất quán. Khi bạn đã chọn phông chữ của mình, hãy chắc chắn tải xuống các tệp cho từng kiểu bạn sẽ sử dụng (bình thường, in đậm, in nghiêng, v.v.).
Bây giờ bạn đã chọn đúng phông chữ cho trang web, hãy xem cách thêm nó.
Cách thêm phông chữ tùy chỉnh vào WordPress
Có một số cách để thêm phông chữ vào trang web WordPress:
- Bổ sung– Trong trường hợp này, các plugin WordPress khác nhau được sử dụng để tạo thuận lợi cho quá trình.
- Bằng tay: Với phương pháp này, bạn cần tải lên phông chữ đã tải xuống trang web và chỉnh sửa tệp CSS.
- Chủ đề– Nhiều chủ đề phổ biến bao gồm các tùy chọn tích hợp để tùy chỉnh phông chữ của bạn (lưu ý: chúng tôi sẽ không bao gồm tùy chọn này vì quy trình sẽ thay đổi tùy theo chủ đề bạn đang sử dụng, nhưng các chủ đề cao cấp chất lượng như chủ đề Total WordPress sẽ được cung cấp tài liệu trực tuyến mà bạn có thể dễ dàng theo dõi , như hướng dẫn này để thêm phông chữ tùy chỉnh vào Tổng số)
Lựa chọn 1: thay đổi phông chữ WordPress bằng plugin
Nếu chúng tôi không quan tâm đến những thay đổi toàn cầu, chúng tôi có thể cài đặt các plugin WordPress sẽ thay đổi phông chữ trên trang web của bạn.
Các tính năng của plugin phông chữ tùy chỉnh
Phần mềm nguồn mở có một lợi thế cho sự quan tâm của cộng đồng và WordPress cũng có lợi thế này. Các plugin WordPress khác nhau cho phép bạn thêm phông chữ tùy chỉnh. Làm thế nào để chọn một bổ sung phù hợp với rất nhiều? Các đặc điểm của plugin phông chữ tùy chỉnh là gì?
Dưới đây là một số điểm cần lưu ý:
- Khả năng sử dụng phông chữ tùy chỉnh
- Khả năng sử dụng nhiều hơn một nguồn.
- Thành phần mục tiêu và tiêu đề
- Phần thưởng: khả năng thay đổi cài đặt phông chữ từ trình chỉnh sửa trực quan
Đó là tất cả. Tính năng đầu tiên trong danh sách là rất quan trọng. Bạn luôn có thể tải xuống các phông chữ từ các trang web như DaFont, Font Squirrel, v.v., nhưng bạn sẽ có thể tải chúng lên WordPress.
Chúng ta hãy xem một số plugin WordPress cho phép bạn tải các phông chữ tùy chỉnh.
Trình tải phông chữ tùy chỉnh
Plugin này cho phép bạn tải xuống phông chữ Google và áp dụng chúng cho các yếu tố khác nhau của blog của bạn. Ví dụ, đối với các tiêu đề hoặc nội dung của bài viết hoặc trang.
Sử dụng bất kỳ phông chữ
Đây là một plugin WordPress cung cấp cho bạn một giao diện thuận tiện để tải xuống các phông chữ và sử dụng chúng trực tiếp thông qua trình chỉnh sửa trực quan. Trình chỉnh sửa trực quan WordPress có thể tự động thay đổi phông chữ của bất kỳ văn bản nào. Plugin này cung cấp một số tính năng, giúp quá trình thêm phông chữ tùy chỉnh dễ quản lý hơn nhiều.
Phông chữ WP của Google
WP Google Fonts cho phép bạn sử dụng Danh mục Google Fonts. Một trong những lợi ích đáng kinh ngạc của plugin này là bổ sung gần 1000 phông chữ Google. Mặc dù bạn có thể xếp hàng các phông chữ Google theo cách thủ công, việc sử dụng plugin cho hầu hết người dùng sẽ dễ dàng hơn nhiều.
Làm thế nào để cài đặt phông chữ với một plugin?
Lấy ví dụ WP Google Fonts. Chỉ cần cài đặt plugin này từ kho lưu trữ chính thức của WordPress và mở phần Google Fonts.
Bạn sẽ thấy bảng điều khiển Google Fonts tại đây. Chọn phông chữ và thay đổi các cài đặt khác nhau, chẳng hạn như kiểu phông chữ, các yếu tố được áp dụng, v.v.
Lựa chọn 2 – Cài đặt phông chữ WordPress tùy chỉnh thủ công
Thông qua chỉ thị @ font-face, bạn có thể kết nối một hoặc nhiều phông chữ với trang web của mình. Nhưng phương pháp này có ưu và nhược điểm của nó.
Ưu:
- Thông qua CSS, bạn có thể kết nối các phông chữ ở bất kỳ định dạng nào: ttf, otf, woff, svg.
- Các tập tin phông chữ sẽ được đặt trên máy chủ của bạn; sẽ không phụ thuộc vào dịch vụ của bên thứ ba.
Nhược điểm:
- Để kết nối phông chữ chính xác cho từng kiểu, bạn phải đăng ký một mã riêng.
- Nếu không biết CSS, nó có thể dễ bị nhầm lẫn.
Nhưng nó không phải là một vấn đề thực sự nếu bạn có thể chỉ cần sao chép một mã hoàn thành và nơi bạn cần xác định giá trị của bạn.
Lưu ý: Trước khi bạn bắt đầu, hãy chắc chắn tạo một chủ đề con cho trang web của bạn. Bằng cách này, bạn có thể thực hiện tất cả các chỉnh sửa cho chủ đề của con bạn, giữ nguyên chủ đề cốt lõi của bạn để bạn có thể dễ dàng cập nhật nó khi cần trong tương lai.
Bước 1: tạo thư mục "nguồn"
Trong chủ đề của con bạn, hãy tạo thư mục "phông chữ" mới tại: wp-content / Themes / your-child-theme / font
Bước 2. Tải các tệp phông chữ đã tải xuống lên trang web của bạn
Điều này có thể được thực hiện thông qua bảng điều khiển chỗ ở của bạn hoặc qua FTP.
Thêm tất cả các tệp phông chữ vào thư mục phông chữ mới được thêm vào: wp-content / Themes / your-child-theme / font bạn đã tạo
Bước 3. Nhập phông chữ qua biểu định kiểu chủ đề con
Mở tệp style.css của chủ đề con của bạn và thêm đoạn mã sau vào đầu tệp CSS (sau nhận xét của chủ đề con):
@font-face{
font-family: 'MyWebFont';
src: url('fonts/WebFont.eot');
src: url('fonts/WebFont.eot?#iefix') format('embedded-opentype'),
url('fonts/WebFont.woff') format('woff'),
url('fonts/WebFont.ttf') format('truetype'),
url('fonts/WebFont.svg#svgwebfont') format('svg');
font-weight: normal;
font-style: normal;
}Ở đâu MyWebFont là tên của nguồn và giá trị của thuộc tính src (dữ liệu trong ngoặc đơn trong dấu ngoặc kép) là vị trí của nó (liên kết tương đối). Chúng ta cần chỉ định từng phong cách riêng biệt.
Vì lần đầu tiên chúng tôi kết nối kiểu thông thường, chúng tôi đặt thuộc tính trọng lượng và kiểu phông chữ thành bình thường.
Bước 4. Bằng cách thêm chữ in nghiêng, Viết như sau:
@font-face{
font-family: 'MyWebFont';
src: url('fonts/WebFont-Italic.eot');
src: url('fonts/WebFont-Italic.eot?#iefix') format('embedded-opentype'),
url('fonts/WebFont-Italic.woff') format('woff'),
url('fonts/WebFont-Italic.ttf') format('truetype'),
url('fonts/WebFont-Italic.svg#svgwebfont') format('svg');
font-weight: normal;
font-style: italic;
}Trường hợp mọi thứ đều giống nhau, chúng tôi chỉ in nghiêng thuộc tính kiểu phông chữ.
Bước 5. Để thêm phông chữ đậm, thêm mã sau đây:
@font-face{
font-family: 'MyWebFont';
src: url('fonts/WebFont-Bold.eot');
src: url('fonts/WebFont-Bold.eot?#iefix') format('embedded-opentype'),
url('fonts/WebFont-Bold.woff') format('woff'),
url('fonts/WebFont-Bold.ttf') format('truetype'),
url('fonts/WebFont-Bold.svg#svgwebfont') format('svg');
font-weight: bold;
font-style: normal;
}Nơi chúng tôi đặt thuộc tính trọng lượng phông chữ thành đậm.
Nhớ chỉ định vị trí chính xác của các tệp phông cho mỗi kiểu.
Bước 6. Để kết nối in đậm và in nghiêng như sau:
@font-face{
font-family: 'MyWebFont';
src: url('fonts/WebFont-Italic-Bold.eot');
src: url('fonts/WebFont-Italic-Bold.eot?#iefix') format('embedded-opentype'),
url('fonts/WebFont-Italic-Bold.woff') format('woff'),
url('fonts/WebFont-Italic-Bold.ttf') format('truetype'),
url('fonts/WebFont-Italic-Bold.svg#svgwebfont') format('svg');
font-weight: bold;
font-style: italic;
}Vâng, đó là nó. Bây giờ bạn đã kết nối bốn kiểu phông chữ với trang web của bạn.
Nhưng có một nhận xét: kết nối phông chữ này sẽ hiển thị không chính xác trong Internet Explorer 8. Điều an ủi là vẫn còn rất ít người sử dụng IE8.
Hoàn thành phông chữ WordPress tùy chỉnh
Điều đầu tiên người dùng chú ý khi họ truy cập trang web của bạn là gì? Phải, thiết kế của bạn! Hầu hết các thiết kế dựa trên việc sử dụng đúng các phông chữ đẹp. Do đó, bạn phải chăm sóc thiết kế phông chữ của trang web của bạn. Thêm mã hoặc sử dụng một trong các plugin được đề cập ở trên để nhúng một kiểu phông chữ mới. Làm thế nào bạn chọn nó là tùy thuộc vào bạn.
Đảm bảo bạn không sử dụng nhiều hơn hai phông chữ trên cùng một trang. Vì bạn càng thêm phông chữ tùy chỉnh vào trang web, tốc độ của trang web càng chậm.
Đó là nó, hãy bình luận.
Chúng tôi cũng sẽ rất vui khi biết bạn chọn tùy chọn nào để thêm phông chữ tùy chỉnh vào trang web của bạn và nơi bạn có thể tìm thấy nó.
