Cách thêm phông chữ tùy chỉnh vào trang web WordPress của bạn

Cách thêm phông chữ tùy chỉnh vào trang web WordPress của bạn

Tại sao làm cho blog của bạn nhàm chán bằng cách sử dụng 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 phông chữ tùy chỉnh. Phông chữ tùy chỉnh là một tính năng hay cho phép blog của bạn trông thích hơn 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 blog và các trang web với phông chữ phù hợp. Chúng 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 bạ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 vui 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, có hai câu hỏi được đặt ra – 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 đã qua khi Times New Roman và Georgia được coi là phông chữ duy nhất cho các văn bản trên các trang web. Trong vài năm qua, không gian phông chữ đã thay đổi hoàn toàn với sự ra đời 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ỉ một số 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 trong 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ữ, bạn yêu cầu? Là như nó có thể, một số nghiên cứu chứng minh 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 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ỏ 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 đọc dễ dàng hơn 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, thì 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. Đó là lý do tại sao nó là cần thiết để 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.

Lựa chọn thay thế Google Fonts

Nơi tìm phông chữ tùy chỉnh

Nhiều bạn biết về phông chữ Google miễn phí. Có rất nhiều trang web 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, thì bạn cần giấy phép. Phông chữ Google và Phông chữ Adobe Edge đều miễn phí. Đó là lý do tại sao chúng không quá độc đáo. Và điều này không phù hợp với chúng tôi.

Ở đây có một ít tài nguyên khác để tìm phông chữ để sử dụng miễn phí và thương mại:

  1. Mẫu quái vật – Trên trang web thị trường TemplateMonster, bạn sẽ tìm thấy mọi thứ cho Thiết kế Web bạn cần. 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 tại 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 trên tờ rơi 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.
  2. MyFont – MyFonts hiện cung cấp nhiều lựa chọn phông chữ lớn nhất trên thế giới. Tuy nhiên, giá ở đây cũng thuộc phân khúc cao hơn. 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.
  3. Phông chữ – Fontspring bán các phông chữ ưa thích cho mục đích 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. Bên cạnh đó, có một phần riêng biệt với phông chữ miễn phí. Bộ sưu tập là rung. Nhưng bạn sẽ phải 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.
  4. Cufonfont – Nó cũng là một bộ sưu tập rộng lớn các phông chữ 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ó rất nhiều phông chữ miễn phí, và chúng được chia thành các phần riêng biệt. Hệ thống phân loại trên CufonFonts khá linh hoạt và thuận tiện. Ngoài ra, hỗ trợ Webfont được bao gồm.
  5. 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 hay 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 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 phông chữ trên trang web. Sau đó, giao diện 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 nhớ 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 được phông chữ phù hợp cho trang web, hãy để Tìm hiểu 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:

  1. 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.
  2. Thủ công: sử dụng phương pháp này, bạn cần tải lên phông chữ được tải lên trang web và chỉnh sửa tệp CSS.
  3. 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 dựa trên chủ đề bạn đang sử dụng, nhưng các chủ đề cao cấp chất lượng như chủ đề Total WordPress sẽ cung cấp trực tuyến tài liệu bạn có thể dễ dàng làm theo – như hướng dẫn này để thêm phông chữ tùy chỉnh vào Tổng số)

Tùy 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 điểm của Plugin Font 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. Một số plugin WordPress cho phép bạn thêm phông chữ tùy chỉnh. Làm thế nào để chọn một plugin phù hợp với rất nhiều? Các tính năng của plugin phông chữ tùy chỉnh là gì?

Dưới đây là một vài điểm cần tính đến:

  • 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 phông chữ
  • Tiêu đề và thành phần mục 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 cần có thể tải chúng lên WordPress.

Hãy cùng xem xét một vài plugin cho WordPress cho phép bạn tải lên các phông chữ tùy chỉnh.

Trình tải lên phông chữ tùy chỉnh

Trình tải lên 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ụ: 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ữ

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.

Phông chữ WP của Google

Phông chữ WP của Google

WP Google Fonts cho phép bạn sử dụng danh mục phông chữ của Google. Một trong những lợi ích đáng kinh ngạc của plugin này là việc bổ sung gần 1000 phông chữ Google. Mặc dù bạn có thể sử dụng các phông chữ của Google theo cách thủ công, nhưng nó lại dễ sử dụng plugin hơn cho hầu hết người dùng.

Cách cài đặt phông chữ với plugin?

Hãy để từ chối, ví dụ như 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.

Phông chữ WP của Google

Bạn sẽ thấy một bảng điều khiển phông chữ của Google ở ​​đâ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..

Tùy chọn 2 – Cài đặt phông chữ tùy chỉnh WordPress theo cách thủ công

Thông qua chỉ thị @ font-face, bạn có thể kết nối cả một hoặc một số 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.

Ư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 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 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 cần đă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 xác định giá trị của mình.

Ghi chú: Trước khi 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ủ đề con của mình, để lại chủ đề cốt lõi của bạn một cách khéo léo để 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 phông chữ Tiếng Việt

Trong chủ đề con của bạn, hãy tạo một thư mục phông chữ mới của Wikipedia trong: 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 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 / 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 chủ đề con style style.css của bạn và thêm đoạn mã sau vào đầu tệp CSS (sau khi nhận xét chủ đề con):

@mặt chữ{
họ phông chữ: 'MyWebFont';
src: url ('phông chữ / WebFont.eot');
src: url ('phông chữ / WebFont.eot? #iefix') định dạng ('embed-opentype'),
định dạng url ('phông chữ / WebFont.woff') ('woff'),
định dạng url ('phông chữ / WebFont.ttf') ('truetype'),
định dạng url ('phông chữ / WebFont.svg # svgwebfont') ('svg');
font-weight: bình thường;
kiểu chữ: bình thường;
}

Ở đâu MyWebFont là tên của phông chữ và giá trị của thuộc tính src (dữ liệu trong ngoặc trong dấu ngoặc kép) là vị trí của chúng (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 các thuộc tính trọng lượng phông chữ và kiểu phông chữ thành bình thường.

Bước 4. Khi thêm chữ in nghiêng, Viết như sau:

@mặt chữ{
họ phông chữ: 'MyWebFont';
src: url ('phông chữ / WebFont-Italic.eot');
src: url ('phông chữ / WebFont-Italic.eot? #iefix') định dạng ('embed-opentype'),
định dạng url ('phông chữ / WebFont-Italic.woff') ('woff'),
định dạng url ('phông chữ / WebFont-Italic.ttf') ('truetype'),
định dạng url ('phông chữ / WebFont-Italic.svg # svgwebfont') ('svg');
font-weight: bình thường;
kiểu chữ: in nghiêng;
}

Trường hợp mọi thứ đều giống nhau, chỉ có chúng tôi gắn thuộc tính kiểu phông chữ vào chữ nghiêng.

Bước 5. Để thêm phông chữ đậm, thêm đoạn mã sau:

@mặt chữ{
họ phông chữ: 'MyWebFont';
src: url ('phông chữ / WebFont-Bold.eot');
src: url ('phông chữ / WebFont-Bold.eot? #iefix') định dạng ('embed-opentype'),
định dạng url ('phông chữ / WebFont-Bold.woff') ('woff'),
định dạng url ('phông chữ / WebFont-Bold.ttf') ('truetype'),
định dạng url ('phông chữ / WebFont-Bold.svg # svgwebfont') ('svg');
font-weight: in đậm;
kiểu chữ: bình thường;
}

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 chữ cho mỗi kiểu.

Bước 6. Để kết nối in nghiêng đậm, hãy gõ như sau:

@mặt chữ{
họ phông chữ: 'MyWebFont';
src: url ('phông chữ / WebFont-Italic-Bold.eot');
src: url ('phông chữ / WebFont-Italic-Bold.eot? #iefix') định dạng ('embed-opentype'),
định dạng url ('phông chữ / WebFont-Italic-Bold.woff') ('woff'),
định dạng url ('phông chữ / WebFont-Italic-Bold.ttf') ('truetype'),
định dạng url ('phông chữ / WebFont-Italic-Bold.svg # svgwebfont') ('svg');
font-weight: in đậm;
kiểu chữ: in nghiêng;
}

Chà, đó là tất cả ’s 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ẽ được hiển thị không chính xác trong Internet Explorer 8. Điều an ủi là có rất ít người vẫn sử dụng IE8.

Gói các phông chữ tùy chỉnh cho WordPress

Đ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 nó! Hầu hết các thiết kế phụ thuộc vào việc sử dụng đúng các phông chữ đẹp. Vì vậy, 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. Bạn chọn cách nào 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 các phông chữ tùy chỉnh vào trang web, tốc độ của trang web càng chậm.

Đó là tất cả, 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 tìm thấy phông chữ của mình.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map