Hướng dẫn cài font chữ vào wp

Lướt website nào đó bạn thấy thích font chữ đó,hay font chữ nào đó trên mạng bạn thấy thích quá đi, và muốn dùng ngay nó cho website của mình.Hãy cùng Sơn Web tìm hiểu cách thêm font chữ vào WordPress theo 1 số cách đơn giản sau nhé.

Để thêm font chữ vào thủ công ví dụ như font UTM Avo vào website internet-fptcantho.com , bạn sẽ cần thực hiện các công việc sau: upload file font lên host chứ souce code website, khai báo thuộc tính @font-face, sử dụng font-family đã khai báo trong @font-face cho class,id..Các bước cụ thể như sau:

Bước 0: Chop phép upload file .ttf lên host server. Sửa file wp-config.php thêm dòng sau:

define('ALLOW_UNFILTERED_UPLOADS', true);

Bước 1: Tải font muốn sử dụng trong web lên host ( Nếu WordPress có thể vào Admin-> Media->upload file trực tiếp và copy đường dẫn của font

Bước 2: Khai báo @font-face trong style.css hoặc admin cho cho phép chỉnh sửa css

@font-face { font-family: UTM Avo; src: url(https://internet-fptcantho.com/wp-content/uploads/2023/07/UTM-Avo.ttf); font-weight: normal; } @font-face { font-family: UTM Akashi; src: url(https://internet-fptcantho.com/wp-content/uploads/2023/07/UTM-Akashi.ttf); font-weight: normal; } @font-face { font-family: UTM AvoBold; src: url(https://internet-fptcantho.com/wp-content/uploads/2023/07/UTM-AvoBold.ttf); font-weight: bold; } Bước 3: Sử dụng font-family đã định nghĩa từ @font-face Ví dụ sau

body {

font-family: 'UTM Avo';  
font-size: 16px;  

} Webiste sử dụng trong hướng dẫn: https://internet-fptcantho.com/ bạn có thể xem font chữ trực tiếp trên web. Để thêm font chữ vào website WordPress bằng plugin bạn có thể cài đặt 1 số plugin sau: WP Google Fonts,Typekit Fonts For WordPress,Use Any Font

Nếu bạn vừa download được ở đâu đó trên mạng một font chữ đẹp và đang muốn sử dụng nó cho website WordPress của mình thì bài viết này là dành cho bạn. Mặc dù tôi không khuyến khích việc sử dụng Google Fonts hoặc các font chữ tùy chỉnh của bên thứ ba vì chúng ít nhiều gây ảnh hưởng tiêu cực đến tốc độ load web. Tuy nhiên, cũng phải thừa nhận rằng, chúng có thể mang lại cho website của bạn phong cách khác biệt và những nét cá tính riêng.

Tham khảo thêm:

• Lưu trữ Google Fonts ngay trên host để tăng tốc độ load
• Khắc phục lỗi Google Fonts trong Google PageSpeed Insights

Một số lưu ý trước khi tiến hành

• Hãy đảm bảo font chữ mà bạn muốn thêm có định dạng file là .woff2, .woff, .ttf, .eot, .svg hoặc .otf. Các bạn có thể upload cùng lúc nhiều định dạng. Tuy nhiên, bạn nên ưu tiên sử dụng .woff2 hoặc .woff vì chúng có tốc độ load tốt hơn.
• Nhớ kích hoạt tính năng cho phép upload các file tùy chỉnh trong website WordPress. Tham khảo bài viết “Upload các định dạng file tùy chỉnh trong WordPress” nếu bạn chưa biết cách làm.

1. Đầu tiên, các bạn cần phải cài đặt và kích hoạt một plugin có tên là Custom Fonts (download).

2. Truy cập Appearance => Custom Fonts. Tại đây, các bạn sẽ nhìn thấy một số thiết lập như sau:

Trong đó:

• Name: đặt tên cho font chữ.
• Font Fallback: lựa chọn font chữ dự phòng. Chúng nên là font chữ mặc định mà thiết bị nào cũng có sẵn, ví dụ sans-serif, serif, Arial, Helvetica, Time New Roman…
• Font Display: các bạn nên chọn swap để nó ít ảnh hưởng tới tốc độ load web nhất.
• Font weight: chọn độ đậm của font chữ.
• Lựa chọn file font chữ mà bạn có để upload lên, tương ứng với các mục Font .woff2, Font .woff, Font .ttf, Font .eot, Font .svg hoặc Font .otf.
• Click vào nút Add Font Variation nếu bạn muốn thêm các biến thể của font chữ (ví dụ thêm font weight khác chẳng hạn).

Sau khi hoàn tất, click vào nút Add New Font để xác nhận.

3. Các font chữ đã được thêm thành công sẽ hiển thị trong khung bên phải của giao diện.

4. Khai báo việc sử dụng font chữ trong CSS. Ví dụ:

h1, h2, h3, h4, h5, h6 {

font-family: "SFU Sydney", sans-serif;  
font-weight: normal;  
font-size: 18px;  
line-height: 1.3;  
color: 

# 222; }

Thật đơn giản phải không nào? Chúc các bạn thành công!

Bạn có đang sử dụng font chữ tùy chỉnh trên website WordPress của mình không? Bạn đã làm cách nào để tích hợp nó? Hãy chia sẻ với chúng tôi phương pháp của bạn thông qua khung bình luận ở bên dưới.

Nếu bạn thích bài viết này, hãy theo dõi blog của tôi để thường xuyên cập nhật những bài viết hay nhất, mới nhất nhé. Cảm ơn rất nhiều. :)

Một người con của xứ Nghệ, hiện đang sinh sống tại Hà Nội. Theo dõi tôi trên Facebook để cập nhật những tin tức mới nhất liên quan đến WordPress nhé.