Thêm phông chữ tùy chỉnh vào WordPress

/ *
Tên chủ đề: Hai mươi mười bảy đứa trẻ
URI chủ đề: https://wordpress.org/theme/tovenseventeen/
Bản mẫu: mười hai
Tác giả: nhóm WordPress
URI tác giả: https://wordpress.org/
Phiên bản: 1.0

* /

@import url ('https://fonts.googleapis.com/css?family=Open+Sans|Roboto');


/ * CSS bổ sung ở đây * /

Làm như vậy sẽ tải phông chữ vào trang web của bạn từ biểu định kiểu. Có vẻ như là một giải pháp đơn giản, phải không? Tại sao nó lại được đề xuất ít nhất?

Lý do là vấn đề hiệu suất. Sử dụng @ nhập khẩu không còn là cách được đề xuất vì nó ngăn các trình duyệt tải xuống một vài biểu định kiểu cùng một lúc. Hậu quả: thời gian tải trang chậm hơn. Tránh xa nó nếu bạn có thể.

2. Sử dụng tệp mẫu WordPress

Phương pháp thứ hai để có được các phông chữ trên trang web của bạn là lấy mã được cung cấp bởi các thư viện phông chữ và sao chép chúng trong tiêu đề.php tệp mẫu. Hầu hết các chủ đề WordPress tiêu chuẩn đều có nó.

Đảm bảo đặt nó ở đâu đó giữa và dấu ngoặc. Bằng cách đó, phông chữ của bạn sẽ tải bất cứ khi nào một trang được tải.

Nếu bạn đang sử dụng một chủ đề con, hãy nhớ sao chép chủ đề cha mẹ tiêu đề.php tập tin vào thư mục chủ đề con và thực hiện các thay đổi trong đó.

Một số chủ đề đi kèm với cài đặt cho phép bạn thêm mã tùy chỉnh vào đầu trang và chân trang của mình thông qua phụ trợ. Đây cũng là một lựa chọn khả thi.

3. Sử dụng @mặt chữ

Cho đến nay, chúng ta mới chỉ nói về cách sử dụng phông chữ tùy chỉnh trong WordPress được lưu trữ ở một nơi khác, cụ thể là các máy chủ của Google và Adobe. Tuy nhiên, cũng có thể lưu trữ các phông chữ trên trang web của riêng bạn và cung cấp chúng cho khách truy cập các trình duyệt của Google từ đó.

Để làm điều này, trước tiên bạn cần tải xuống phông chữ trong câu hỏi. Ghi nhớ nút tải xuống trên Google Fonts? Điều đó sẽ trở nên tiện dụng bây giờ. Các nhà cung cấp khác cũng cho phép bạn tải xuống phông chữ.

Khi bạn làm như vậy, hãy chắc chắn rằng bạn nhận được nó ở định dạng phông chữ web. Điều đó có nghĩa là TTF, OTF hoặc WOFF. Bạn sẽ tìm thấy thêm thông tin về nó đây. Nếu bạn không có định dạng phông chữ web phù hợp, bạn cũng có thể sử dụng dịch vụ này để chuyển đổi phông chữ của bạn thành một phông chữ được hỗ trợ.

Khi bạn đã sẵn sàng các tệp phông chữ của mình, bạn cần tải chúng lên trang web WordPress của mình qua FTP. Một nơi tốt để lưu trữ chúng là trong thư mục con của chủ đề con bạn có tên phông chữ (sáng tạo, chúng tôi biết).

Sau đó, bạn cần tải phông chữ trong biểu định kiểu của mình qua @mặt chữ. Đây là những gì nó trông giống như:

@mặt chữ {
họ phông chữ: Roboto;
src: url (http: //localhost/wordpress/wp-content/theme/tovenseventeen-child/fonts/Roboto-Regular.ttf);
font-weight: bình thường;
}

Hãy nhớ thay thế tên của phông chữ và địa chỉ cho vị trí của nó trên trang web của riêng bạn. Sau đó, phông chữ tùy chỉnh mới của bạn sẽ có thể sử dụng được.

Tuy nhiên, đây cũng không phải là giải pháp tốt nhất, đặc biệt là hiệu năng. Các máy chủ Google của Google có thể nhanh hơn so với máy của bạn và do đó tải các phông chữ tùy chỉnh từ đó có khả năng là giải pháp tốt hơn.

4. Phông chữ Enqueueing - Cách thức WordPress WordPress

Nếu bạn thực sự muốn thêm phông chữ tùy chỉnh vào WordPress theo cách chính xác, bạn sẽ sử dụng Hàm.php tập tin (bên trong thư mục của chủ đề hiện đang hoạt động của bạn) và chức năng  wp_enqueue_script hoặc là wp_enqueue_style.

Với sự giúp đỡ của họ, chúng tôi có thể lấy các đoạn mã được cung cấp bởi các trang web phông chữ. Tuy nhiên, thay vì sao chép chúng vào một tệp, chúng tôi sẽ thêm chúng vào tiêu đề thông qua một chức năng.

Điều gì làm nên sự khác biệt giữa wp_enqueue_script và wp_enqueue_style? Như tên của họ cho thấy, một là để thêm tập lệnh, một cho các biểu định kiểu. Cái nào đúng để sử dụng tùy thuộc vào cách phông chữ tùy chỉnh của bạn được cung cấp từ nguồn của chúng.

Ví dụ: Google Fonts cung cấp cho bạn phông chữ dưới dạng biểu định kiểu. Trong trường hợp đó, bạn sẽ thêm chúng vào trang web WordPress của mình theo cách này:

hàm add_google_fonts () {
wp_enqueue_style ('google_web_fonts', 'https://fonts.googleapis.com/css?family=Open+Sans|Roboto');
}

add_action ('wp_enqueue_scripts', 'add_google_fonts');

Ngược lại, phông chữ từ Phông chữ Web Adobe Edge có dạng JavaScript. Do đó, để thu hút họ trên trang web của bạn, mã sẽ trông như thế này:

hàm add_adobe_fonts () {
wp_enqueue_script ('adobe_edge_web_fonts', '//use.edgefonts.net/open-sans.js');
}

add_action ('wp_enqueue_scripts', 'add_adobe_fonts');

Wasn rất khó khăn, phải không? Thêm vào đó, bạn nhận được thêm điểm khi thực hiện theo cách WordPress.

5. Gọi các Phông chữ Tùy chỉnh trong Biểu định kiểu của bạn

Bây giờ các phông chữ đã được thêm vào trang web của bạn, bạn có thể chính thức sử dụng chúng. Để làm như vậy, tất cả những gì còn lại là để thêm một khai báo cho phông chữ mới trong biểu định kiểu của bạn. Ví dụ: để thay đổi phông chữ cho thẻ tiêu đề của bạn, bạn sẽ sử dụng một cái gì đó như thế này:

h1,
h2,
h3,
h4,
h5,
h6 {
họ phông chữ: 'Roboto';
}

Ghi chú: Hãy chú ý đến cách dịch vụ bạn đang sử dụng chỉ định khai báo CSS cho phông chữ của bạn. Trên trang web thử nghiệm của chúng tôi, dường như chúng tôi không thể làm cho Adobe Edge Web Font hoạt động vì họ gọi Open Sans bằng CSS với mở-sans như trái ngược với 'Mở Sans' trong Google Fonts.

Đó là nó. Bây giờ bạn đã biết cách thêm phông chữ tùy chỉnh vào WordPress theo cách thủ công. Xin chúc mừng chính bạn, đây là một số kiến ​​thức cấp độ tiếp theo! Rõ ràng, các hành động tương tự có thể thông qua các plugin. Đó là những gì chúng ta sẽ nói về tiếp theo.

B) Cách thêm phông chữ tùy chỉnh vào WordPress thông qua Plugin

Lĩnh vực WordPress sẽ không giống như thế nào nếu có một số giải pháp plugin để thêm phông chữ tùy chỉnh vào nền tảng. Chúng tôi sẽ giới thiệu cách sử dụng Phông chữ Google dễ dàng, đó là một trong những plugin phổ biến nhất trong lĩnh vực này.

1. Cài đặt Plugin

Bước đầu tiên là cài đặt plugin. Để làm điều đó, đi qua Plugin> Cài đặt mới. Sau đó, tìm kiếm tên plugin Plugin. Trong kết quả tìm kiếm, nhấp vào Cài đặt ngay và kích hoạt plugin sau khi nó trên trang web của bạn.

2. Thêm / Thay đổi phông chữ trên trang web của bạn

Khi plugin được kích hoạt, bạn tìm thấy một mục menu mới được gọi là Kiểu chữ Dưới Ngoại hình> Tùy chỉnh.

Khi bạn nhấp vào nó và chọn Kiểu chữ mặc định, bạn tìm thấy một danh sách các điều khiển để thay đổi phông chữ của đoạn văn và tiêu đề của bạn.

Sử dụng chúng thực sự đơn giản. Chỉ cần nhấp vào menu thả xuống nơi nó nói Chỉnh sửa phông chữ cho một phần của trang web của bạn, bạn muốn thay đổi nó cho. Điều này cho phép bạn truy cập vào menu này:

Ở đây, phần quan trọng nhất là phần dưới Họ phông chữ. Tại đây, bạn có thể chọn loại phông chữ mới từ toàn bộ thư viện Google Font (sử dụng Tập lệnh / tập hợp con để giới hạn các lựa chọn phông chữ cho những người có ký tự đặc biệt).

Các phông chữ được sắp xếp theo tiêu chuẩn, serif, sans-serif, hiển thị, chữ viết tay và phông chữ đơn cách. Tuy nhiên, bạn cũng có thể chỉ cần tìm kiếm chúng theo tên.

Khi bạn nhấp vào một phông chữ, bạn có thể xem trước các thay đổi trong thời gian thực ở bên phải.

3. Cấu hình phông chữ

Khi bạn đã chọn một phông chữ, có nhiều tùy chọn để tùy chỉnh kiểu chữ của bạn hơn nữa.

Trước hết, bạn có thể thay đổi trọng lượng phông chữ / kiểu trong menu cùng tên. Điều này kiểm soát độ dày của các chữ cái.

Hơn nữa, dưới Trang trí văn bản, bạn có thể thêm gạch chân, gạch ngang và gạch chân. Chuyển đổi văn bản cũng cho phép bạn đặt nó cho tất cả các chữ hoa, tất cả chữ thường hoặc viết hoa mỗi chữ cái đầu tiên. Phía dưới cái Xuất hiện trên cùng, bạn cũng có thể kiểm soát màu phông chữ, màu nền, kích thước phông chữ, chiều cao dòng và khoảng cách chữ.

Cuối cùng, Định vị cho phép bạn thay đổi các cài đặt khác như lề, phần đệm, đường viền, bán kính đường viền và hiển thị.

Nói tóm lại, bạn sẽ có thể tùy chỉnh hoàn toàn các phông chữ trên trang web của bạn theo ý thích của bạn. Dễ không, có phải là nó không? Đừng quên đánh Lưu và xuất bản ở đầu khi bạn hài lòng với những thay đổi của bạn.

Nó không hoạt động, tôi phải làm gì?

Đôi khi bạn không thể thay đổi một số phông chữ trên trang web của bạn. Điều đó thường xảy ra khi chủ đề bạn sử dụng đi kèm với các lớp và bộ chọn CSS không chuẩn để tạo kiểu cho chúng.

Ví dụ, trong chủ đề Twenty Sixteen, tiêu đề bài đăng trên blog không chỉ được định nghĩa là H1 mà còn có một lớp CSS được gọi là .Tiêu đề mục nhập. Vì lý do đó, plugin không thể thay đổi chúng.

Để khắc phục vấn đề này, bạn cần tạo một cái gọi là kiểm soát phông chữ Dưới Cài đặt> Phông chữ Google.

Bạn có thể kết hợp các bộ chọn CSS với điều khiển mới và buộc ghi đè khi cần thiết. Sau khi bạn đã làm như vậy, kiểm soát phông chữ mới có sẵn dưới dạng tùy chọn bổ sung trong Trình tùy chỉnh WordPress trong Kiểu chữ chủ đề. Dễ như ăn bánh.

Các phông chữ tùy chỉnh khác Các plugin WordPress

Ngoài ra còn có các plugin WordPress khác có sẵn để thêm phông chữ tùy chỉnh:

• Sử dụng bất kỳ phông chữ - Nó giúp bạn sử dụng các phông chữ được tải lên mà không cần bất kỳ CSS. Nó chứa phông chữ trên máy chủ của riêng bạn và cũng cung cấp các công cụ chuyển đổi cho các định dạng phông chữ.
• Phông chữ Typekit cho WordPress - Sử dụng phông chữ từ Adobe Bộ máy dịch vụ (mà bạn cần đăng ký). Nó cho phép bạn nhập mã nhúng và CSS tùy chỉnh trực tiếp trong plugin.
• Phông chữ TK Google - Một giải pháp thay thế để nhúng các phông chữ Google giúp chuyển trải nghiệm Google Fonts sang phụ trợ WordPress. Hãy thử các phông chữ với bản xem trước và văn bản tùy chỉnh, sau đó thay đổi nó trong Trình tùy chỉnh WordPress.

Tại sao nên sử dụng phông chữ tùy chỉnh trên trang web WordPress của bạn?

Bản thân kiểu chữ là một môn khoa học và chúng tôi đã thắng có thể cung cấp cho bạn một khóa học đầy đủ về việc sử dụng phông chữ trong thiết kế web ở đây. Rốt cuộc, nó không chỉ về phông chữ mà còn về kích thước, độ nghiêng, độ dày và rất nhiều thứ khác. Tuy nhiên, chúng tôi có thể bao gồm tại sao sử dụng phông chữ tùy chỉnh trên trang web WordPress của bạn là một ý tưởng tốt.

1. Kiểu chữ là một phần của Ấn tượng đầu tiên

Trước hết, phông chữ bạn sử dụng ảnh hưởng rất nhiều đến cách trang web của bạn được cảm nhận. Là trang web của bạn vui vẻ và vui tươi? Bạn có phải là một chuyên gia kinh doanh? Khách truy cập quyết định điều này trong nháy mắt và kiểu chữ của bạn đóng một vai trò lớn trong nhận thức của họ.

2. Phông chữ có nhiều ảnh hưởng hơn bạn nghĩ

Nó có thể ảnh hưởng đến khả năng học hỏi, ghi nhớ văn bản và thậm chí ảnh hưởng đến tâm trạng của bạn.

Ví dụ: trong một nghiên cứu, lưu ý rằng nếu bạn muốn tăng thời gian đọc một số văn bản, bạn nên sử dụng phông chữ serif. Tuy nhiên, nếu bạn muốn đọc thêm trong một thời gian ngắn, bạn nên chuyển sang phông chữ sans-serif.

Một nghiên cứu khác cho thấy mọi người cùng một hướng dẫn tập thể dục trong các kiểu chữ khác nhau. Sau đó, họ yêu cầu người tham gia ước tính mất bao lâu để họ hoàn thành các hướng dẫn đã nói. Thật hấp dẫn, những người có phông chữ phức tạp hơn sẽ đoán rằng họ sẽ mất nhiều thời gian hơn nhóm có phông chữ đơn giản hơn. Kết quả là, họ ít theo thói quen tập thể dục.

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

1. Sử dụng Google Fonts để tìm kiểu chữ tùy chỉnh

Dịch vụ đầu tiên chúng tôi sẽ xem xét là Phông chữ Google. Như tên cho thấy, nó là một dịch vụ của Google cung cấp hơn 800 phông chữ khác nhau. Sử dụng miễn phí. Cho tất cả mọi người.

Dưới đây, cách sử dụng nó:

2. Tìm đúng phông chữ

Khi bạn lần đầu tiên truy cập trang Google Fonts (chỉ cần nhập nó vào Google Tìm kiếm), đây là những gì bạn sẽ thấy:

Giao diện người dùng được thực hiện để giúp bạn tìm đúng phông chữ cho mục đích của bạn. Nếu bạn đã có một phông chữ trong tâm trí, bạn chỉ cần nhập tên của nó vào trường tìm kiếm ở phía bên phải.

Nếu không, bạn có thể lọc các phông chữ theo nhiều cách khác nhau, ví dụ: theo thể loại:

• Serif - Ý nghĩa phông chữ với các dòng nguệch ngoạc ở cuối, như Times New Roman.
• Sans serif - Phông chữ đơn giản mà không có sự nguệch ngoạc, như Helvetica. Các phông chữ được sử dụng trên trang web này là một ví dụ về điều đó.
• Trưng bày - Kiểu chữ có thể được sử dụng ở kích thước lớn hơn như tiêu đề.
• Chữ viết tay - Bạn có muốn kiểu chữ của bạn trông giống như được viết bằng tay không? Sau đó, đây là cài đặt của bạn.
• Không gian vũ trụ - Kiểu chữ trong đó tất cả các nhân vật chiếm cùng một không gian, như thế này.

Các bộ lọc khác bao gồm:

• Sắp xếp - Sắp xếp phông chữ sau khi có xu hướng, phổ biến, ngày thêm hoặc theo thứ tự abc.
• Ngôn ngữ -Giới hạn lựa chọn phông chữ của bạn cho các ngôn ngữ không được viết trong bảng chữ cái Latinh như tiếng Ả Rập, tiếng Thái hoặc tiếng Việt.
• Một số phong cách -Chọn bao nhiêu kiểu có sẵn mà bạn cần, nghĩa là một phông chữ có sẵn ở các độ dày khác nhau, in nghiêng, đậm và hơn thế nữa.
• Độ dày - Chọn độ dày mong muốn của phông chữ của bạn.
• Xiên - Tương tự như độ dày nhưng đối với mặt nghiêng. Nó dao động từ thẳng đến gần như ngang.
• Chiều rộng - Lọc phông chữ theo chiều rộng của chữ cái và khoảng cách.

Khi bạn áp dụng bất kỳ bộ lọc nào, kết quả tìm kiếm của bạn sẽ điều chỉnh theo thời gian thực. Ở bên trái, bạn sẽ thấy các phông chữ có sẵn trong danh mục và câu ví dụ của bạn.

Khi bạn di chuột qua một phông chữ, bạn có thể sử dụng các menu thả xuống ở trên cùng để Google Fonts hiển thị một đoạn ví dụ, toàn bộ bảng chữ cái hoặc chữ số. Bạn cũng có thể chỉ cần nhấp vào trường câu và viết bất cứ điều gì bạn muốn.

Thêm vào đó, có các tùy chọn để thay đổi kiểu và kích thước phông chữ. Khi bạn thực hiện thay đổi, bạn cũng có tùy chọn áp dụng chúng cho tất cả các kết quả tìm kiếm của bạn. Cuối cùng, nhìn vào trang chi tiết phông chữ bằng cách nhấp vào Xem mẫu vật.

3. Thêm phông chữ vào bộ sưu tập của bạn

Nếu bạn thích một phông chữ cụ thể, bạn có thể sử dụng dấu cộng màu đỏ ở góc trên bên phải để thêm nó vào bộ sưu tập của bạn. Làm như vậy sẽ mở một menu ở phía dưới nơi bạn thấy tất cả các phông chữ bạn đã chọn.

Lưu ý rằng bạn có thể thêm nhiều họ phông chữ. Điều này có ý nghĩa, ví dụ, khi bạn chọn một bản sao cho cơ thể của bạn và một bản khác cho các tiêu đề.

4. Tùy chỉnh cài đặt phông chữ

Một khi bạn hài lòng với bộ sưu tập của mình, nhấp vào menu dưới cùng. Làm như vậy sẽ mở màn hình này:

Như bạn có thể thấy, bạn có thể tìm thấy một số đoạn mã để nhúng và sử dụng phông chữ trên trang web của mình. Điều này sẽ trở nên quan trọng sau này. Bây giờ, bấm vào tab nói Tùy chỉnh. Làm như vậy sẽ đưa bạn đến menu này:

Tại đây, bạn có thể chọn các kiểu phông chữ được đề cập. Điều này rất quan trọng nếu bạn muốn sử dụng phông chữ ở các kích cỡ khác nhau, thường là như vậy.

Tuy nhiên, hãy cẩn thận: trang web của bạn phải tải càng nhiều kiểu, nó sẽ càng chậm lại (Google Fonts thậm chí còn cho bạn biết tốc độ tải cho bộ sưu tập hiện tại của bạn ở trên cùng bên phải). Vì vậy, hãy suy nghĩ về những gì bạn thực sự cần và chỉ chọn điều đó. Nhân tiện, có nhiều cách bạn có thể tăng tốc WordPress.

Trong trường hợp bạn cần bất kỳ ngôn ngữ nào khác ngoài bảng chữ cái Latinh tiêu chuẩn, hãy nhớ chọn nó ở phía dưới.

Bên cạnh đó, tất cả những gì bạn cần biết là hai biểu tượng mũi tên ở trên cùng.

Cái bên trái cho phép bạn xem trước và chia sẻ bộ sưu tập phông chữ của bạn. Khi bạn chọn làm như vậy, nó sẽ mở ra một trang mở rộng nơi bạn có thể chèn văn bản mẫu và xem nó trong tất cả các phông chữ cùng một lúc. Trang này cũng tốt để chia sẻ với mọi người.

Quan trọng hơn là nút tải xuống bên cạnh nó. Bằng cách nhấp vào nó, bạn có thể tải xuống các tệp phông chữ để sử dụng chúng trên máy tính để bàn của mình (ví dụ: trong Photoshop). Sử dụng Bầu trời để giữ cho họ cập nhật.

Sau đó, chúng tôi cũng sẽ chỉ cho bạn cách tải các tệp này lên máy chủ và lưu trữ phông chữ trực tiếp trên trang web của bạn. Hãy ghi nhớ điều này cho tương lai. Bây giờ, chúng tôi sẽ cho bạn thấy một thư viện phông chữ tương tự thứ hai.

Nguồn bổ sung cho các phông chữ tùy chỉnh

• Hơn 15 phông chữ an toàn trên web, chúng tôi khuyên dùng

Với những điều trên, bạn sẽ có thể tìm thấy một cái gì đó cho mình. Một mẹo cuối cùng - nếu bạn không biết cách kết hợp phông chữ đúng cách, hãy sử dụng Cặp chữ nơi các nhà thiết kế đã thực hiện các công việc cho bạn.

Jeffrey Wilson Administrator

Sorry! The Author has not filled his profile.

follow me