Bạn có muốn tìm hiểu cách thêm phông chữ tùy chỉnh vào trang web WordPress không?
Tại sao lại làm cho blog của bạn trở nên nhàm chán bằng cách sử dụng các 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ủ đề bạn đề cập với nhiều loại phông chữ tùy chỉnh. Phông chữ tùy chỉnh là một tính năng thú vị giúp blog của bạn trông đẹp hơn so với những người khác.
Hãy đối mặt với nó; tất cả chúng ta đều yêu thích các blog và trang web có phông chữ phù hợp. Chúng không chỉ trang trí cho trang web mà còn giúp thu hút người dùng đến với nội dung của bạn. Tuy nhiên, sự lựa chọn phông chữ chuẩn của WordPress 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 theo cách thủ công hoặc bằng plugin WordPress chuyên nghành.
Và ở đây có hai câu hỏi nảy sinh: lấy phông chữ tùy chỉnh ở đâu cho WordPress và cách cài đặt phông chữ tùy chỉnh trên trang web của bạn.
Hãy tìm hiểu.
Tại sao tôi nên sử dụng phông chữ tùy chỉnh?
Đã qua rồi cái thời mà Times New Roman và Georgia được coi là những kiểu chữ duy nhất cho văn bản trên các trang web. Trong vài năm qua, không gian phông chữ đã hoàn toàn thay đổi với sự ra đời của các phông chữ như Google Fonts và những người khác.
Ngày nay, có hàng trăm phông chữ, thông tin và hỗ trợ đào tạo và tài nguyên thiết kế miễn phí 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 các phông chữ mặc định. Chỉ một số chủ đề WordPress nhất định chọn hỗ trợ và sử dụng phông chữ tùy chỉnh.
Do đó, trong bài viết này, bạn sẽ học cách tìm các phông chữ tùy chỉnh phù hợp và sử dụng chúng trên trang web WordPress của mình.
Tầm quan trọng của việc sử dụng phông chữ tùy chỉnh
Bạn hỏi tại sao lại thay đổi phông chữ, thụt lề từ, giãn dòng, khoảng cách giữa các chữ cái hoặc độ bão hòa phông chữ? Tuy nhiên, một số nghiên cứu cho thấy rằng kiểu chữ 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 phông chữ. Ở 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 người đọc, ngay cả khi họ không chú ý đến nó. Từ bỏ thiết kế phông chữ có nghĩa là từ bỏ chính sự phát triển! Tâm trạng của người đọc phụ thuộc vào nó. Phông chữ giúp dễ đọc hơn hoặc buộc người dùng phải rời khỏi trang.
Tất cả các trình duyệt web đều bao gồm một tập hợp các 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, thì phiên bản tiêu chuẩn sẽ được sử dụng. Bạn vẫn có thể sử dụng các phông chữ mặc định, nhưng chúng gây khó khăn hơn cho người dùng. Đây là lý do tại sao việc sử dụng phông chữ tùy chỉnh là điều cần thiết. Nếu chủ đề WordPress của bạn không cung cấp cho bạn các tùy chọn để thay đổi phông chữ, có rất nhiều trang web và công cụ có thể trợ giúp.
Google Fonts thay thế
Nhiều người trong số các bạn biết Phông chữ Google. Có rất nhiều trang web khác, nơi bạn có thể tìm thấy các phông chữ đẹp. Một số trong số chúng là miễn phí cho mục đích sử dụng cá nhân. Nếu bạn cần sử dụng cho mục đích thương mại, bạn sẽ cần có giấy phép. Phông chữ Google và Phông chữ Adobe Edge đều miễn phí. Đây là lý do tại sao chúng không quá độc đáo.
đây là một số các tài nguyên khác để tìm phông chữ để sử dụng miễn phí và thương mại:
- Template Monster - Trên trang web TemplateMonster, bạn sẽ tìm thấy mọi thứ bạn cần để thiết kế web. Ngoài ra còn có nhiều phông chữ và gói phông chữ cho mục đích sử dụng cá nhân với một mức giá nhỏ. Ngoài ra, Để giúp bạn lựa chọn, tất cả các phông chữ được trình bày trên tài liệu quảng cáo hoặc khung. Mỗi phông chữ cũng được trình bày với một giấy phép thương mại.
- MyFonts - MyFonts hiện cung cấp lựa chọn phông chữ lớn nhất trên thế giới. Tuy nhiên, giá cả ở đây cũng thuộc phân khúc trên. Vì vậy, nếu bạn có ngân sách eo hẹp, điều này có thể không dành cho bạn.
- Phông ChữMùa Xuân - Fontspring bán các phông chữ mới để sử dụng thương mại. Nhưng trong hầu hết mọi gia đình, 1-2 phông chữ miễn phí 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 các phông chữ miễn phí. Bộ sưu tập là sôi động. Nhưng bạn sẽ cần phải nghiên cứu kỹ thông tin cấp phép cho một phông chữ cụ thể trước khi tải xuống.
- Cufonfont - Nó cũng là một bộ sưu tập khổng lồ các phông chữ khác nhau. Chọn một cái bất kỳ, và bạn sẽ thấy một trang có thông tin chi tiết về nó. Có rất nhiều phông chữ miễn phí và chúng được chia thành các phần riêng lẻ. Hệ thống phân loại trên CufonFonts khá linh hoạt và tiện lợi. Ngoài ra, hỗ trợ Webfont cũng được bao gồm.
- Dafont - Một bộ sưu tập có thể truy cập khác gồm 3 phông chữ miễn phí. Hầu hết chúng chỉ được thiết kế cho mục đích sử dụng cá nhân. Một tính năng thú vị của DaFont là một hệ thống danh mục. Bạn có thể chọn phông chữ theo phong cách truyện tranh, trò chơi điện tử, cổ điển, v.v.
Việc lựa chọn phông chữ rất hấp dẫn vì chúng đều đẹp. Nhưng bạn không nên chọn nhiều. Không sử dụng nhiều hơn hai phông chữ trên một trang web web. Sau đósự xuất hiện của trang web của bạn sẽ nhất quán. Khi bạn đã chọn phông chữ của mình, hãy nhớ tải lên các tệp cho từng kiểu bạn sẽ sử dụng (thông thường, đậm, nghiêng, v.v.).
Bây giờ bạn đã chọn được phông chữ thích hợp cho trang web của mình, hãy cùng tìm hiểu cách thêm phông chữ đó.
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, khác plugin WordPress được sử dụng để tạo điều kiện thuận lợi cho quá trình.
- bằng tay : sử dụng phương pháp này, bạn cần tải xuống phông chữ được tải xuống từ trang web và sửa đổi tệp CSS.
- chủ đề: Nhiều chủ đề phổ biến có 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 đề cập đến tùy chọn này vì quy trình sẽ khác nhau tùy thuộc vào chủ đề bạn đang sử dụng.
Tùy chọn 1 - Thay đổi Phông chữ WordPress bằng Plugin
Nếu chúng ta không quan tâm đến những thay đổi toàn cầu, chúng ta có thể cài đặt plugin WordPress sẽ thay đổi phông chữ trên trang web của bạn.
Tính năng của Plugin phông chữ tùy chỉnh
Phần mềm nguồn mở có lợi thế về sự quan tâm của cộng đồng và WordPress cũng có lợi thế đó. Một số plugin WordPress cho phép bạn thêm các phông chữ tùy chỉnh. Làm thế nào để chọn một plugin thích hợp khi có quá nhiều? Các tính năng của plugin WordPress phông chữ tùy chỉnh là gì?
Dưới đây là một số điểm cần xem xét:
- Khả năng sử dụng phông chữ tùy chỉnh
- Khả năng sử dụng nhiều phông chữ
- Tiêu đề và các thành phần đích
- 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ả. Đặc điểm đầu tiên trong danh sách là rất quan trọng. Bạn vẫn có thể tải xuống phông chữ từ các trang web như DaFont, Font Squirrel, v.v., nhưng bạn cần tải chúng lên WordPress.
Hãy xem xét một số plugin cho WordPress cho phép bạn tải lên các phông chữ tùy chỉnh.
1. Phông chữ tuyệt vời tốt hơn
Plugin WordPress này sẽ cho phép người dùng tự động kết hợp phiên bản mới nhất của phông chữ Better Font Awesome với CSS, mã ngắn và nhiều hơn nữa. Ngoài ra, plugin WordPress này được cập nhật tự động.
Bạn sẽ tìm thấy các chức năng: cập nhật thường xuyên, trình tạo mã ngắn, khả năng tương thích với các plugin WordPress khác, v.v.
Tải về | Bản demo | Web hosting
2. Phông chữ Google cho WordPress
Plugin WordPress này bao gồm các phông chữ đặc biệt 877, cho phép bạn sử dụng tất cả các phông chữ trên các trang web WordPress của mình. Nhờ xem trước thời gian thực, nó sẽ cho phép bạn xem trang web của bạn sẽ trông như thế nào sau khi phông chữ được áp dụng.
Ngoài ra, bạn sẽ có thể lưu nó và chỉnh sửa nó trên frontend khi bạn tìm thấy sự kết hợp mà bạn sẽ thích.
Các tính năng của nó bao gồm: xem trước thời gian thực, một SEO khá tiên tiến, hỗ trợ đa ngôn ngữ, hỗ trợ thêm 870 + Google Fonts, cập nhật dễ dàng và hơn thế nữa.
Tải về | Bản demo | Web hosting
3. PluginFonts
Fonts Plugin là một plugin WordPress miễn phí cho phép người dùng truy cập thư viện Google Fonts và Adobe Fonts. Với plugin WordPress này, bạn có thể chọn từ hơn 1000 phông chữ của Google và Adobe, sử dụng nhiều phông chữ trên trang web của bạn và thử nghiệm các tùy chọn khác nhau với tính năng xem trước thời gian thực của plugin trong tùy biến WordPress.
Để có thêm cách tùy chỉnh kiểu chữ trang web của bạn như kích thước phông chữ, khoảng cách giữa các chữ cái và chiều cao dòng, bạn có thể nâng cấp lên phiên bản cao cấp, Phông chữ Plugin Pro.Tải về | Bản demo | Web hosting
4. Phông chữ Google dễ dàng
Easy Google Fonts là một trong những plugin WordPress tốt nhất để tùy chỉnh kiểu chữ của trang web của bạn. Giống như Plugin Phông chữ, nó cho phép bạn chọn từ hàng trăm Phông chữ của Google và xem trước chúng trong Trình tùy chỉnh trước khi thêm chúng vào trang web của bạn.
Mặc dù nó cung cấp quyền truy cập vào một số lượng nhỏ hơn Google Fonts, nó độc đáo ở chỗ nó cho phép bạn tạo các quy tắc và điều khiển phông chữ tùy chỉnh trong khu vực quản trị, sẽ ngay lập tức xuất hiện trong tùy biến WordPress.
Tải về | Bản demo | Web hosting
Tùy chọn 2 - Cài đặt Phông chữ Tùy chỉnh WordPress theo cách thủ công
Sử dụng lệnh @ 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ó.
lợi ích:
- Nhờ 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 phông chữ sẽ được đặt trên máy chủ của bạn - bạn sẽ không phụ thuộc vào các dịch vụ của bên thứ ba.
nhược điểm :
- Để có 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, bạ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 chỉ định các giá trị của mình.
Remarque : Trước khi bạn bắt đầu, hãy đảm bảo 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 thay đổi đối với chủ đề con của mình, để lại chủ đề chính để bạn có thể dễ dàng cập nhật nếu cần trong tương lai.
Bước 1: Tạo thư mục "phông chữ"
Trong chủ đề con của bạn, hãy tạo một thư mục "phông chữ" mới trong: wp-content / themes / your-child-theme / phông chữ
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 lưu trữ 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 / Trong chủ đề con của bạn, hãy tạo một thư mục “phông chữ” mới trong: wp-content / themes / your-child-theme / phông chữ mà bạn đã tạo.
Bước 3. Nhập phông chữ qua biểu định kiểu chủ đề con
Mở tập tin style.css của chủ đề con của bạn và thêm mã sau vào đầu tệp CSS (sau nhận xét về 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 Phông chữ Web của tôi là tên của phông chữ và giá trị của thuộc tính src (dữ liệu trong dấu ngoặc đơn trong dấu ngoặc kép) là vị trí của chúng (các liên kết tương đối). Chúng ta cần xác định từng phong cách riêng biệt.
Vì chúng ta đang kết nối kiểu bình thường trước, nên chúng ta đặt thuộc tính font-weight và font-style thành bình thường.
Bước 4. Khi 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;
}Khi mọi thứ đều giống nhau, chúng tôi là những người duy nhất gắn thuộc tính kiểu phông chữ vào chữ in nghiêng.
Bước 5. Để thêm phông chữ đậm, hãy thêm mã sau:
@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 font-weight thành in đậm.
Hãy nhớ chỉ định vị trí chính xác của các tệp phông chữ cho mỗi kiểu.
Bước 6. Để kết nối chữ in nghiêng đậm, hãy nhập 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 mình.
Nhưng có một lưu ý: kết nối phông chữ này sẽ không hiển thị 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.
Các tài nguyên được đề xuất khác
Chúng tôi cũng mời bạn tham khảo các tài nguyên dưới đây để đi xa hơn trong việc kiểm soát và kiểm soát trang web và blog của bạn.
- 10 plugin accordion WordPress cho một trang web
- Cách thêm nhiều cột trong WordPress
- Một số plugin để tích hợp dịch vụ của Google trên blog của bạn
- Các plugin 5 WordPress để hiển thị thông báo
- Sử dụng nền tảng khác nhau WordPress
Kết luận
Điều đầu tiên người dùng nhận thấy khi họ truy cập trang web của bạn là gì? Đúng vậy, thiết kế của nó! Hầu hết thiết kế dựa vào việc sử dụng hợp lý các phông chữ đẹp. Vì vậy, bạn cần phải chăm sóc thiết kế phông chữ 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 kiểu phông chữ mới. Bạn chọn nó như thế nào là tùy thuộc vào bạn.
Đảm bảo rằng bạn không sử dụng nhiều hơn hai phông chữ trên cùng một trang web. Vì bạn càng thêm nhiều phông chữ tùy chỉnh vào trang web, thì tốc độ trang web càng giảm.
Đó là nó cho bài viết này hướng dẫn bạn cách thêm phông chữ tùy chỉnh vào trang web WordPress. Chúng tôi mời bạn thử. Nếu bạn có bất kỳ mối quan tâm hoặc đề xuất nào, vui lòng cho chúng tôi biết trong vòng ý kiến.
Tuy nhiên, bạn cũng sẽ có thể tham khảo ý kiến của chúng tôi ressources, nếu bạn cần thêm các yếu tố để thực hiện các dự án tạo trang Internet của mình, bằng cách tham khảo hướng dẫn của chúng tôi về Tạo blog WordPress hoặc một ngày Divi: chủ đề WordPress tốt nhất mọi thời đại.
Trong khi chờ đợi, chia sẻ bài viết này trên các mạng xã hội khác nhau của bạn.
...
