Cài đặt font chữ cho website

Bạn đang muốn thêm font chữ vào website WordPress.

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

Hay đơn giản là bạn muốn thêm những font chữ khác lạ, tăng độ 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 ở trên website.

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

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

Lưu ý: Load quá nhiều font có thể làm chậm website, lời khuyên của mình chỉ nên sử dụng 2 font chữ toàn website mà thôi. Vừa tạo tính đồng nhất vừa mang lại tốc độ tốt hơn.

Okie trước khi bắt đầu.

Hãy tìm hiểu xem làm thế nào để tìm được font ưng ý nhé.

Từng có khoảng thời gian font là thứ gì đó 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 website cung cấp font chữ miễn phí như: Google Font, Typekit, FontSquirred và fonts.com.

Nếu bạn không biết làm thể nào để phối hợp các font chữ với nhau cho đẹp nhất.

Hãy sử dụng Font Pair, nó sẽ giúp bạn mix các Google fonts..

À mà nhớ dùng 2 thôi nhé, nhiều vừa xấu vừa chậm 😀

Hướng dẫn thêm Google Font vào website WordPress

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

Đa phần mọi người sẽ chọn font chữ từ đây, có rất nhiều cách sử dụng chúng.

Sau đây mình sẽ hướng dẫn chi tiết từng cách một cho mọi người.

Phương Pháp 1: Sử dụng Easy Google Font Plugin

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

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

Đầu tiên hay cài đặt và kích hoạt plugin Easy Google Font.

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

Sau khi kích hoạt thành công đến Appearance » Customizer.

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

Click vào đây, bạn sẽ thấy những khu vực trên website bạn có thể chỉnh sửa font chữ.

Chọn Edit Font để bắt đầu chỉnh sửa font chữ bạn muốn.

Ở đây có 3 phần:

• Style
• Appearance
• Positioning

Những setting này có thể sẽ thay đổi tùy vào mỗi theme.

Sẽ có những theme bạn sẽ không thể thay đổi trực tiếp được font chữ.

Để khác phục điều này, plugin cho phép bạn bảng điều khiển riêng để chỉnh font chữ.

Chỉ cần đi đến Setting » Google Fonts.

Tiếp theo đến đây bấm Creat Font Control, đến đây nó sẽ yêu cầu bạn nhập CSS Slelector.

Đến đây bạn có thể các phần tử HTLM (H1, H2, H3, p, blockquout) mà bạn muốn, hoặc thêm class CSS.

Bạn có thể dùng F12 » Inpector, để xem class nào đang được sử dụng cho khu vực đó.

Anh em có thể tham khảo dùng VisBug Chrome Extension nhé.

Sau khi chọn xong bạn hãy bấm Save Fonts Control.

Nó cho phép bạn tạo nhiều bảng điều khiển, cho nhiều khu vực khác nhau.

Bây giờ chỉ cần quay lại phần Customize ở đầu và tiến hành Edit Fonts thôi.

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

Phương pháp này yêu cầu bạn thêm một đoạn code nhỏ vào file theme.

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

• Ô tìm kiếm font chữ.
• Đoạn văn ví dụ cho font chữ đó
• Ô lọc font chữ (theo xu thế, dùng nhiều nhất)
• Cỡ chữ, màu…

Bấm vào đấu + để lựa chọn font chữ mà bạn muốn.

Một của sổ sẽ hiện lên những font chữ bạn vừa chọn xong.

Ở đây có 2 tab là Embed và Customize (customize là tùy chỉnh kiểu chữ nhé)

Copy đoạn code trong khung standard.

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

Bây giờ có 2 cách để nhúng đoạn code này:

1. 1. Mở file header.php của thêm thêm đoạn code trên vào thẻ là được
   2. Dùng plugin Inster Headers and Footer nhé.

Okie bây giờ bạn đã có thể sử dụng font chữ trên bằng CSS:

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

Thêm font chữ vào WordPress sử dụng Typekit

Typekit by Adobe Fonts là một trong những kho fonts rất nổi tiếng sau Google Fonts.

Chắc không còn ai lạ gì bộ công cụ của Adobe (Photoshop, Illustrator, Premiere…)

Ở đây có gói Premium (mất phí), cho phép bạn tải nhiều fonts cao cấp hơn là Free.

Cách tím kiếm font rất dễ tương tự Google Fonts, chỉ cần search trong box tìm kiếm.

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

Giao diện cũng tương tự Google Fonts, bấm Activate Font bạn cần.

Nó cũng cho phép bạn chọn nhiều font cùng lúc.

Tiếp theo bấm vào Add to Web Project.

Ở đây bạn đặt tên cho Project, chọn các kiểu chữ (bình thường, in nghiêng, in đậm…).

Tích xong hãy chọn Creat Project, tương tự Google Fonts.

Một bảng hướng dẫn cách nhúng cũng như sử dụng Adoble Fonts hiện ra.

Làm giống như Google Fonts, chèn đoạn code trên vào thẻ nhé.

Và cách dùng như dưới:

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

Thêm Font 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ỳ font nào thích trên website của bạn.

Đầu tiên bạn sẽ cần tải xuống font chữ đó ở định dạng web.

Nếu chưa biết hãy vào FontSquirrel Webfont generator, để convert font chữ đó sang định đạng web.

Sau khi có file webfont đó rồi, hãy upload trực tiếp nó lên server của mình.

Thường thì sẽ nằm trong folder fonts của file theme hoặc child theme.

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

Sau khi upload thành công, bạn sẽ cần load font này trong theme stylesheet.

Dùng cấu trúc sau nhé:

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

Nhớ thay đổi URL trên bằng đường dẫn đúng của bạn nhé.

Sau cùng thì bạn có thể sử sụng font chữ này bất kỳ đầu trên website bạn thích.

Ví dụ:

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

Nếu bạn đang dùng từ Google Fonts hoặc Adobe Fonts.

Thì tốt nhất là cứ sử dụng font chữ đó từ server của riêng họ (nó sẽ cho bạn tốc độ tốt nhất).

Đó là tất cả những gì Diêu Hâu muốn chia sẻ, hãy tham khảo thêm hướng dẫn thêm icon vào Menu.

Hoặc làm thế nào thêm Favicon cho WordPress.

Các bạn muốn mình viết về vấn đề gì thì cũng comment ở dưới nhé!