Cách sử dụng phông chữ tuỳ chỉnh từ trang web Phông chữ của Google trong phần mềm

Một trong những cách dễ dàng nhất để sử dụng Dreamweaver để thêm phông chữ tuỳ chỉnh vào trang web của bạn do Google cung cấp. Phông chữ Web của Google cung cấp bộ sưu tập phông chữ giới hạn nhưng bạn có thể sử dụng tất cả phông chữ miễn phí. Thực hiện theo các bước sau để thêm bất kỳ phông chữ nào từ trang Web Phông chữ của Google vào trang của bạn:

1. Mở trình duyệt web và truy cập trang Web Phông chữ của Google .

2. Tìm kiếm thông qua các phông có sẵn trên trang web bằng cách chọn kiểu và kiểu phông bạn đang tìm kiếm.

   Để thu hẹp tìm kiếm của bạn, sử dụng Bộ lọc (ở cột bên trái). Bạn có thể thay đổi văn bản được hiển thị trong mỗi phông bằng cách chỉnh sửa trường Xem trước văn bản ở đầu màn hình.

   

3. Tìm phông bạn thích, sau đó nhấp vào nút Thêm vào Bộ sưu tập ở dưới cùng bên phải, ngay dưới mỗi tên phông chữ.

4. Nhấp vào hộp kiểm bên cạnh mỗi kiểu phông mà bạn muốn sử dụng trên trang web của mình.

   Hầu hết các phông chữ trong Thư mục Font của Google chỉ có một phong cách. Mặc dù bạn có thể bị cám dỗ để chọn tất cả các kiểu, tốt nhất bạn chỉ nên chọn những kiểu mà bạn sẽ sử dụng. Như Google đã cảnh báo, bạn càng chọn nhiều kiểu phông chữ, bạn sẽ mất nhiều thời gian hơn để tải xuống trang web của mình.

5. Cuộn xuống trang và chọn tùy chọn Latin (tiếng Anh).

   Nếu bạn cần thêm các ký tự cho một ngôn ngữ khác, hãy chọn tùy chọn Latinh Extended.

6. Cuộn xuống dưới trang sang hộp màu xanh với ba tab; nhấp vào tab đầu tiên để liên kết phông chữ với trang web của bạn.

   Google cung cấp ba tùy chọn: Tiêu chuẩn, @import và JavaScript. Bạn tìm thấy mô tả chi tiết của cả ba trên trang web của Google.

   

7. 7. Sao chép liên kết từ trường Thẻ chuẩn trên Google giống như bạn sẽ sao chép bất kỳ văn bản hoặc mã khác từ trang web.

8. Trong Dreamweaver, dán liên kết vào phần đầu của trang web giữa các thẻ mở và đóng.

9. Trở lại trang web Phông chữ của Google và ở cuối trang, sao chép tên của gia đình phông chữ.

   Bạn có thể tìm thấy tên của họ phông chữ trong tích hợp các Phông chữ vào vùng CSS của bạn.

   Trong định nghĩa kiểu của bạn, bạn phải bao gồm tên của phông chính xác như Google viết nó. Copy-and-paste là cách tốt nhất để đảm bảo tên font phù hợp.

10. Trong Dreamweaver, dán tên của họ font vào trong quy tắc CSS nơi bạn muốn sử dụng phông chữ.

11. Áp dụng quy tắc vào văn bản trong trang web của bạn.

    Nếu bạn sử dụng phông chữ trong kiểu chọn Nhãn Thẻ, chẳng hạn như thẻ

    , khi bạn áp dụng thẻ vào văn bản, phông chữ sẽ được tự động áp dụng như là một phần của quy tắc. Nếu bạn sử dụng phông chữ trong lớp hoặc kiểu ID, kiểu này phải được áp dụng cho một thẻ bao quanh văn bản, chẳng hạn như thẻ

    hoặc thẻ.

12. Xuất bản trang sang máy chủ web và sau đó xem trước trang trong một trình duyệt web để xem phông chữ.

    Lưu ý rằng khi bạn sử dụng Phông chữ web của Google, bạn không thể thấy phông chữ được hiển thị trong Dreamweaver, ngay cả khi bạn sử dụng tùy chọn Chế độ xem Trực tuyến. Để đảm bảo rằng phông chữ hoạt động trên trang của bạn, bạn có thể cần chuyển trang sang máy chủ web bằng FTP và xem trước trang sau khi nó được xuất bản trực tuyến.