Cài đặt Google Fonts không phải là điều mới mẻ, tuy nhiên không phải ai cũng biết. Ngoại trừ những anh chị em chuyên về công nghệ thông tin và thiết kế website wordpress, còn lại hầu hết mọi người đều vẫn “gà mờ” với công việc này. Và nhắc đến Google Fonts cứ tưởng cái gì đó rất phức tạp. Một phần vì sợ tiếng Anh (vì đa số những trang này đều bằng tiếng anh), nhưng thời đại công nghệ số rồi, hãy đừng lo lắng về nó quá nhé.
Khi bạn lướt qua các trang web nổi tiếng trong đó có những trang được xây dựng bằng wordpress, bạn phát thèm vì những Font chữ trên đó quá đẹp, mượt mà, chuyên nghiệp. Đó chính là họ đang sử dụng Google Fonts. Nhìn lại web mình, font chữ tiếng Việt bị lỗi chữ to chữ nhỏ, font này ghép font kia, nhìn rất ức chế, nhất là những bạn mới bắt đầu tự thiết kế website wordpress. Bạn dạo quanh một vòng tìm kiếm trên mạng internet ở các trang công nghệ cũng có hướng dẫn, nhưng sao quá sơ sài, hoặc từ năm 2010 hoặc đã được một thời gian rồi chưa cập nhật, mà Google thì bạn biết đó, nó cập nhật liên tục nên sẽ có một số thay đổi so với bài hướng dẫn đã được một thời gian tuổi. Một số trang thì giấu nghề, chỉ chọt qua loa, một số trang thì chỉ dẫn thiếu hoặc không tận tình.
Vậy, làm sao để cài đặt Google Fonts cho wordpress một cách dễ dàng, an toàn. Hôm nay mình xin chia sẻ kinh nghiệm của mình, đã làm thành công và rất hài lòng vì nhìn lại web mình font chữ đã rất đẹp và chuyên nghiệp.
Bước 1: Đăng ký tài khoản nhà phát triển ứng dụng Google.
Đầu tiên các bạn đăng ký tài khoản với vai trò là nhà phát triển ứng dụng nhé, truy cập trực tiếp tại: https://console.developers.google.com/apis/credentials/ , một màn hình mới hiện ra yêu cầu bạn đăng nhập, nếu có tài khoản Gmail rồi thì bạn cứ nhập vào và đăng ký thôi nhé. Nhấn nút “Tiếp theo”. Bạn đợi trong khoảng 10 giây.
Một màn hình mới mang tên Google Cloud Platform xuất hiện và với câu chào “Welcome IT”, bạn nhìn dòng phía dưới nó chỗ Country bạn chọn là Vietnam nhé. Dòng Terms of Services: bạn tích vào ô “I Agree to the Google Cloud Platform Terms of Service, and the terms of service of any applicable services and APIs“.
Bước 2: Tạo dự án (Create Project)
Màn hình Credentials hiện ra, phía dưới có dòng chữ “To view this page, select a project”, bạn nhấp vào nút “CREATE PROJECT”.
Hệ thống tự động chuyển qua một màn hình khác, bạn nhập tên Dự Án tùy thích ở vị trí “Project name”, hoặc bạn để mặc định cũng ok. Rồi bạn nhấn nút “CREATE”. Bạn đợi trong khoảng 10-15 giây sẽ có một màn hình khác hiện ra.
Bước 3: Tạo Google Fonts API Key
Ở màn hình này sẽ hiển thị 3 mục:
- API Keys: hiển thị các API key mà bạn đã tạo.
- OAuth 2.0 Clients IDs
- Service Accounts
Bạn chỉ cần quan tâm tới mục đầu tiên là API Keys. Mặc định là chưa có key nào được tạo, do đó nó sẽ hiển thị dòng “no API Keys to display“. Bạn sẽ cần tạo key để cấu hình vào website của mình và xác minh với Google rằng website của mình đang dùng Fonts của google từ dự án mới được bạn tạo ra, và lúc đó website của bạn sẽ được liên kết với Google Fonts thông qua API Key này. Cách làm như sau:
Bên cạnh tên mục Credentials, Bạn nhấn vào Thẻ “+ CREATE CREDENTIALS” sẽ hiện ra nhiều mục, bạn chọn mục đầu tiên là API Key.
Đợi khoảng 3 giây, một màn hình Pop-up nhỏ hiện ra thông báo là API Key đã được tạo (API key created). Ở ô “Your API Key” sẽ có một dòng với rất nhiều ký tự lộn xộn liên tục đó chính là key của bạn. Bạn copy toàn bộ key này và dán vào vị trí xác minh API Key trên ứng dụng mở rộng (Plugin) Easy Google Fonts trong website WordPress của bạn.
Bước 4: Tạo Google Fonts Tùy Thích.
Bạn truy cập vào https://fonts.google.com/ . Chỗ Language bạn chọn Vietnam nhé. Để Google sẽ hiển thị ra những font chữ nào có hỗ trợ Tiếng Việt. (Google rất thông minh, bạn không chọn ngôn ngữ thì nó cũng biết bạn đang ở Việt Nam, và nó tự động hiển thị các font có hỗ trợ tiếng Việt cho bạn, kèm theo đó là một đoạn văn Demo bằng tiếng Việt để bạn nhìn trực quan hơn, do đó dễ chọn lựa font yêu thích. Mình thường chọn font Roboto vì nó khá đẹp và cũng được gã khổng lồ Google sử dụng trên các web site của họ. Bạn chọn font nào thì chỉ cần nhấn vào font đó nhé.
Một màn hình mới hiện ra: ở đây có các kiểu chữ thường, in nghiêng, in đậm, đủ các kiểu. Bạn cũng có thể kéo thanh kéo để chỉnh kích cỡ chữ to nhỏ tùy thích, mình thường để mặc định là 30px. Chỗ Styles (kiểu chữ hiển thị) mình thì chọn Light 300 (dòng thứ 3), bạn nhấn vào + select this style.
Một thanh bên phải hiện ra, bạn nhấn chọn “Embed”, ở đây xuất hiện 2 thẻ: <link> và @import. Mình thì quan tâm đến thẻ @import hơn.
- Nếu bạn đang sử dụng plugin Easy Google Fonts thì bạn chọn @import : bạn copy toàn bộ code trong ô đầu tiên và chuyển qua web wordpress, mở Easy Google Fonts (thường sau khi cài plugin này bạn tạo nhấn vào Create New Fonts Control, đặt tên tùy thích, sau đó lưu lại).
- Bạn chọn Font Control Name to Edit (khuyến khích là cái bạn vừa tạo mới để phân biệt với cái mặc định, hoặc mặc định nó sẽ có 2 name là Headings và Contents). Bạn paste cái vừa copy vào ô: Add CSS Selectors nhé, rồi nhấn nút Save Font Control. Nhớ nhấn dấu tick vào ô Force Styles Override, ở dòng: please check the box below if you wish to override all of the styles for the selectors above that are forced in your theme’s stylesheet. Nhớ lưu lại.
- Tiếp theo, thoát plugin Easy Google Fonts, bạn trở lại bảng quản trị WordPress website, chọn Giao diện (Appearance) -> chọn Tùy biến (Customizer) -> chọn CSS bổ sung (ở theme TwentyTwenty là vậy, còn một số theme khác bạn phải chọn vào Typography và Edit Font) -> Ở đây bạn khai báo font này trên theme mình đang sử dụng nhé. Thêm đoạn code (lấy từ ô thứ hai CSS Rules to specify families trong thẻ @import lúc nảy). Nhớ để ở giữa 2 dấu { } này nhé. Trong Css đó đã có 1 mẫu font mặc định, bây giờ bạn có thể xóa nó để thêm font của mình nhé (nhớ là giữ cấu trúc y như nó vậy nhé, nhớ chỉ thay đổi những gì ở trong dấu { } này thôi nhé! Thay đổi xong bạn nhấn nút xuất bản (Public) là xong.
- Đối với những bạn nào sử dụng một theme miễn phí hoặc mua bản quyền khác, bạn cũng nhớ check trong theme có mục Typography vào Edit Font, bên dưới phần Fonts Family, bạn có thể tự do chọn thêm bất cứ các font chữ Google nào, kiểu chữ, kích cỡ chữ theo ý mình. Một số theme có thể chặn bạn thay đổi font nên bạn sẽ làm cách sau: Vào Appearance -> Customizer và nhấp vào thẻ Typography. Bên dưới Typography bạn sẽ nhìn thấy tùy chọn “Theme Typography”. Nhấp vào đó để hiển thị Font Control mà bạn đã tạo trước đó. Giờ bạn chỉ cần nhấp vào nút Edit để chọn Font chữ mà mình muốn.
- Lưu ý cho những bạn sử dụng plugin AMP for WP – Accelerated Mobile Pages (By Ahmed Kaludi, Mohammed Kaludi) thì bạn làm như sau: Vào Design -> Global -> tại thẻ Typography: bật Google Fonts thành màu xanh -> Nhập API key tạo lúc đầu vào ô Google Font API Key -> nhấn nút Verify để xác thực -> tại ô Global Font Family bạn chọn Roboto nhé (đó là font mà bạn đã chọn lúc tạo trên fonts.google.com nhé) -> tại ô tiếp theo Global Font Weight Selector bạn chọn 300, rồi chọn regular -> tại Content Font Selector bật sang nút xanh -> tại Content Font Family Selector chọn Roboto -> tại Content Font Family Weight Selector chọn regular. Sau cùng bạn kéo xuống dưới cùng và nhân nút Save Change để lưu lại cài đặt nhé.
Với mỗi bạn sẽ có khác nhau một chút, nhưng các bạn cứ áp dụng những cách trên để làm nhé. Các bạn có thể làm đi làm lại đến khi chọn được fonts yêu thích và thấy hài lòng thì thôi. Lưu ý là khi bạn chọn font nào trên fonts.google.com thì lúc khai báo phải khai báo chính xác các style mình đã chọn nhé.
Như vậy là mình vừa chia sẻ xong cách cài đặt Google Fonts trên website WordPress toàn tập cho các bạn, lưu ý đây là chia sẻ lại trải nghiệm của mình. Trong quá trình viết bài không thể tránh khỏi thiếu xót. Các bạn có thể góp ý thêm bằng cách comment ở bên dưới bài viết, hoặc gửi mail cho mình itthongminh.channel@gmail.com mình sẽ trả lời mail nhanh nhất có thể. Nếu bạn nào cần hỗ trợ cũng cứ gửi mail cho mình, vấn đề nào mình hỗ trợ được mình sẽ hỗ trợ giúp các bạn. Cảm ơn và chúc các bạn thành công!
Bài viết cộng tác từ IT Thông Minh. Subcribe kênh youtube để ủng hộ chúng tôi nhé: https://www.youtube.com/kienthuccanbiet
Kiến Thức Cần Biết là trang chia sẻ kiến thức hay, thực tế và thú vị. Bạn có thể cài đặt web app về máy điện thoại của mình để nhận thông báo mỗi khi có bài chia sẻ mới. Xem hướng dẫn cài đặt tại Đây
