Hướng dẫn thêm Font chữ vào website WordPress [NEW]

Bạn đang tìm cách thêm phông chữ vào trang web WordPress của mình.

Các phông chữ mặc định chưa làm bạn hài lòng, bạn muốn thay đổi chúng?

Hay đơn giản bạn muốn thêm các font chữ khác nhau, tăng tính thẩm mỹ cho website.

Kết hợp nhiều font chữ khác nhau, tạo phong cách riêng cho webiste.

Từ đó tăng trải nghiệm người dùng, khiến họ thích thú hơn khi vào website.

Ngay bây giờ mình sẽ hướng dẫn các bạn nhiều phương pháp khác nhau.

Word sử dụng Google Font, TypeKit và phương pháp CSS3 @ font-face.

Huong-dan-them-font-chu-vao-wordpress

Ghi chú: Việc tải quá nhiều phông chữ có thể làm chậm trang web, lời khuyên của tôi là chỉ nên sử dụng 2 phông chữ cho cả trang web. Vừa tạo sự đồng đều vừa mang lại tốc độ tốt hơn.

Okie trước khi chúng ta bắt đầu.

Tìm hiểu cách tìm đúng phông chữ.

Làm thế nào để tìm phông chữ cho trang web?

Đã có một thời gian phông chữ khá đắt.

Nhưng thời nay đã khác, chúng ta có thể tìm thấy nó rất dễ dàng trên internet.

Có rất nhiều trang web cung cấp phông chữ miễn phí như: Google Font, Typekit, FontSquirred và fonts.com.

Nếu bạn không biết cách kết hợp các font chữ với nhau sao cho đẹp nhất.

Sử dụng Font Pair, nó sẽ giúp bạn kết hợp các phông chữ của Google ..

À, nhưng nhớ chỉ dùng 2 cái thôi, nhiều cái vừa xấu vừa chậm 😀

Làm cách nào để thêm Phông chữ Google vào trang web WordPress của bạn?

Google Fonts là thư viện phông chữ lớn nhất, phổ biến nhất và hoàn toàn miễn phí.

Hầu hết mọi người sẽ chọn phông chữ từ đây, có nhiều cách để sử dụng chúng.

Sau đây mình sẽ hướng dẫn chi tiết cho các bạn.

Phương pháp 1: Sử dụng Plugin phông chữ dễ dàng của Google

Nếu bạn chưa thành thạo hoặc mới sử dụng WordPress.

Đây sẽ là cách dễ dàng và phù hợp nhất dành cho bạn.

Trước tiên, hãy cài đặt và kích hoạt plugin Easy Google Font.

install-easy-google-font-plugin

Nếu bạn vẫn chưa biết cách cài đặt, hãy đọc hướng dẫn cài đặt plugin wordpress của chúng tôi.

Sau khi kích hoạt thành công Giao diện »Tùy biến.

Trong giao diện chỉnh sửa bên trái này, bạn sẽ thấy menu có phần Kiểu chữ.

Nhấp vào đây, bạn sẽ thấy các khu vực trên trang web nơi bạn có thể chỉnh sửa phông chữ.

Chỉnh sửa phông chữ

Chọn Chỉnh sửa phông chữ để bắt đầu chỉnh sửa phông chữ bạn muốn.

Đây là 3 phần:

  • Phong cách
  • Vẻ bề ngoài
  • Định vị

Các cài đặt này có thể thay đổi theo từng chủ đề.

Sẽ có những chủ đề mà bạn sẽ không thể thay đổi phông chữ trực tiếp.

Để khắc phục điều này, plugin cho phép bạn có một bảng điều khiển riêng để điều chỉnh phông chữ.

Chỉ cần đi đến Cài đặt »Phông chữ Google.

Google-Phông chữ-Cài đặt

Tiếp theo vào đây bấm vào Tạo điều khiển phông chữở đây nó sẽ yêu cầu bạn nhập Bộ chọn CSS.

Tại đây bạn có thể sử dụng các phần tử HTML (H1, H2, H3, p, blockquout) bạn muốn hoặc thêm một lớp CSS.

add-css-selector

Bạn có thể dùng F12 »Đầu vàođể xem lớp nào đang được sử dụng cho khu vực đó.

Bạn có thể tham khảo để sử dụng VisBug Chrome Extension.

Class-CSS

Sau khi chọn, hãy nhấp vào Lưu Kiểm soát Phông chữ.

Nó cho phép bạn tạo nhiều trang tổng quan, cho nhiều lĩnh vực khác nhau.

Bây giờ chỉ cần quay lại Tùy chỉnh ở trên cùng và chỉ tiến hành Chỉnh sửa Phông chữ.

Phương pháp 2: Cách thêm Phông chữ Google theo cách thủ công

Phương pháp này yêu cầu bạn thêm một đoạn mã nhỏ vào tệp chủ đề.

Đầu tiên hoặc vào thư viện Google Fonts, bạn sẽ thấy một số ô như bên dưới.

Google-Phông chữ-thư viện

  • Hộp tìm kiếm phông chữ.
  • Văn bản mẫu cho phông chữ đó
  • Hộp lọc phông chữ (theo xu hướng, sử dụng nhiều nhất)
  • Kích thước phông chữ, màu sắc…

chọn-google-phông chữ

Nhấp vào + để chọn phông chữ bạn muốn.

Một cửa sổ sẽ xuất hiện với các phông chữ bạn vừa chọn.

Nhúng google-phông chữ

Ở đây có 2 tab là Embed và Customize (tùy chỉnh là tùy chỉnh font chữ)

Sao chép mã trong hộp tiêu chuẩn.

Roboto | Roboto + Condensed& display = swap ”rel =” stylesheet “>

Bây giờ có hai cách để nhúng mã này:

    1. Mở tệp header.php của bạn và thêm mã trên vào. nhãn <head> là được
    2. Sử dụng plugin Inster Headers and Footer.

Okie bây giờ bạn có thể sử dụng phông chữ trên với CSS:

.h1 site-title { 
font-family: 'Roboto', sans-serif;
}

Thêm phông chữ vào WordPress bằng Typekit

Adobe-Phông chữ

Typekit của Adobe Fonts là một trong những kho phông chữ nổi tiếng nhất sau Google Fonts.

Chắc hẳn không ai còn xa lạ với bộ công cụ của Adobe (Photoshop, Illustrator, Premiere…)

Có một gói Premium ở đây (có tính phí), cho phép bạn tải xuống nhiều phông chữ cao cấp hơn Miễn phí.

Cách tìm phông chữ rất dễ dàng, tương tự như Google Fonts, bạn chỉ cần tìm kiếm trong ô tìm kiếm.

Tìm kiếm-font-chu-Adobe-Fonts

Và bạn sẽ cần tạo một tài khoản để sử dụng dịch vụ tại đây.

Chọn-Adobe-Phông chữ

Giao diện tương tự như Google Fonts, bấm Kích hoạt Font bạn cần.

Nó cũng cho phép bạn chọn nhiều phông chữ cùng một lúc.

Nhấp chuột tiếp theo Thêm vào dự án web.

Add-font-ta-a-web-project

Đây bạn tên Dự ánchọn kiểu phông chữ (bình thường, in nghiêng, in đậm…).

Khi hoàn tất, hãy chọn Tạo dự án, tương tự như Google Fonts.

Hướng dẫn về cách nhúng và sử dụng Adobe Fonts sẽ xuất hiện.

Nhúng-Adobe-Phông chữ

Làm tương tự như Google Fonts, chèn đoạn mã trên vào thẻ <head> Xin vui lòng.

Và cách sử dụng như bên dưới:

.h1 site-ttile {
font-family: roboto,sans-serif;
font-weight: 700;
font-style: normal;
}

Thêm phông chữ vào WordPress bằng cách sử dụng CSS3 @ font-face

Đây là một trong những phương pháp trực tiếp nhất.

Cho phép sử dụng bất kỳ phông chữ nào bạn thích trên trang web của bạn.

Trước tiên, bạn sẽ cần tải xuống phông chữ đó ở định dạng web.

Nếu bạn không biết, hãy truy cập trình tạo FontSquirrel Webfont, để chuyển đổi phông chữ đó sang định dạng web.

Fontsquirrel-webfont-generator

Sau khi bạn có tệp webfont đó, hãy tải nó trực tiếp lên máy chủ của bạn.

Thường thì nó sẽ nằm trong thư mục fonts của tệp chủ đề hoặc chủ đề con.

Cách upload, bạn có thể sử dụng FTP Client hoặc cPanel (nếu hosting có hỗ trợ).

Sau khi tải lên thành công, bạn sẽ cần tải phông chữ này vào biểu định kiểu chủ đề.

Sử dụng cấu trúc sau:

@font-face {
font-family: Arvo;
src: url(http://www.example.com/wp-content/themes/your-theme/fonts/Arvo-Regular.ttf);
font-weight: normal;
}

Hãy nhớ thay đổi URL ở trên bằng đường dẫn chính xác của bạn.

Sau cùng, bạn có thể sử dụng phông chữ này ở bất kỳ đâu trên trang web của mình mà bạn thích.

Ví dụ:

.h1 site-title { 
font-family: "Arvo", Arial, sans-serif; 
}

Nếu bạn đang sử dụng Google Fonts hoặc Adobe Fonts.

Tốt nhất chỉ nên sử dụng phông chữ đó từ máy chủ của riêng họ (nó sẽ cung cấp cho bạn tốc độ tốt nhất).

Đó là tất cả những gì mà Diệu Hậu muốn chia sẻ, mời các bạn tham khảo hướng dẫn thêm biểu tượng vào Menu.

Hoặc cách thêm Favicon cho WordPress.

Nếu bạn có điều gì muốn mình viết thêm, hãy comment bên dưới nhé!