Thêm một phông chữ độc đáo vào trang web của bạn là một cách tuyệt vời để làm cho thiết kế của bạn nổi bật trên mạng và dễ dàng thu hút được nhiều độc giả. 

Trong bài viết này, Minastik sẽ hướng dẫn bạn quy trình từng bước để thêm bất kỳ phông chữ nào vào trang web của bạn.

Lưu ý: Vì các trang web không được xây dựng và quản lý theo cùng một cách nhất định, nên Minastik sẽ giới thiệu phương pháp phổ biến nhất để thêm phông chữ tùy chỉnh và sau đó giải thích cách các nền tảng xây dựng trang web phổ biến nhất hỗ trợ phông chữ tùy chỉnh.

Những phông chữ nào có thể được sử dụng trên Web?

Phông chữ Google (MIỄN PHÍ)

Các phông chữ của Google tự hào có một thư viện ấn tượng gồm gần 1000 phông chữ giấy phép libre có thể được duyệt qua thư mục web tương tác của chúng. Do  API dành cho Nhà phát triển của họ , Phông chữ của Google được cho là phông chữ dễ dàng nhất để thêm vào trang web của bạn và là nơi tôi khuyên bạn nên bắt đầu tìm kiếm.

Phông chữ Adobe (Cao cấp)

Adobe Fonts, (trước đây là Typekit) cung cấp một bộ sưu tập hơn 14.000 phông chữ tuyệt đẹp. Dịch vụ mới và được cải tiến hiện cung cấp cho những người đăng ký Creative Cloud  khả năng truy cập dễ dàng vào toàn bộ thư viện phông chữ của họ chỉ bằng một nút bấm. Không giống như Typekit, Adobe Fonts đã loại bỏ các giới hạn về lượt xem trang và làm cho tất cả các phông chữ của họ có thể truy cập được cho cả máy tính để bàn và sử dụng web.

Phông chữ tùy chỉnh (Phông chữ Squirrel)

Ngoài việc cung cấp  tuyển chọn các phông chữ miễn phí  được cấp phép cho công việc thương mại, Fontsquirrel còn nổi tiếng với  Bộ nhận dạng phông chữ  và  Trình tạo phông chữ .

Trình tạo phông chữ Web cho phép bạn chuyển đổi bất kỳ phông chữ nào mà bạn sở hữu hợp pháp các quyền đối với (định dạng tệp .ttf hoặc .otf) và chuyển đổi phông chữ đó thành Bộ công cụ WebFont có thể sử dụng bao gồm Biểu định kiểu xếp tầng (CSS) dễ sử dụng.

Cách thêm phông chữ:

1, Cách thêm phông chữ tùy chỉnh vào trang web của bạn bằng @font-face 

Quy tắc @font-face CSS được giải thích bên dưới là cách tiếp cận phổ biến nhất để thêm phông chữ tùy chỉnh vào trang web.

Bước 1: Tải xuống phông chữ

Tìm phông chữ tùy chỉnh mà bạn muốn sử dụng trên trang web của mình, sau đó tải xuống định dạng tệp Phông chữ TrueType (.ttf). Bạn cũng có thể tải xuống định dạng Phông chữ OpenType (.otf)

Bước 2: Tạo Bộ công cụ WebFont để duyệt chéo

Tải tệp .ttf hoặc .otf của bạn lên  Trình tạo phông chữ web  rồi tải xuống Bộ phông chữ web của bạn.

Bước 3: Tải các tệp phông chữ lên trang web của bạn

Sử dụng FTP hoặc trình quản lý tệp, tải tất cả các tệp phông chữ có trong Bộ phông chữ web lên trang web của bạn.* Thông thường, bộ công cụ này sẽ bao gồm nhiều phần mở rộng tệp như (.eot), (.woff), (.woff2), (. ttf) và (.svg).

Bộ công cụ của bạn cũng sẽ bao gồm Biểu định kiểu xếp tầng (.css) mà bạn sẽ cần cập nhật và tải lên ở bước 4.

*Bước này sẽ thay đổi rất nhiều dựa trên cách trang web của bạn được xây dựng và lưu trữ.

Bước 4: Cập nhật và tải lên tệp CSS của bạn

Mở tệp CSS trong trình soạn thảo văn bản như Textedit, NotePad hoặc Sublime.

Thay thế URL nguồn hiện tại bằng URL mới mà bạn đã tạo bằng cách tải từng tệp lên.

Theo mặc định, vị trí URL nguồn được đặt trong Bộ phông chữ web đã tải xuống. Nó cần được thay thế bằng vị trí trên máy chủ của bạn.

Đây là một ví dụ nhanh:

Trước khi cập nhật:

@ font-face {
font-family: “CustomFont”;
src: url(“CustomFont.eot”);
src: url(“CustomFont.woff”) định dạng(“woff”),
url(“CustomFont.otf”) định dạng(“opentype”),
url(“CustomFont.svg#filename”) định dạng(“svg”);
}

Sau khi cập nhật:

@ font-face {
font-family: “CustomFont”; src
: url ( ” https://yoursite.com/css/fonts/CustomFont.eot ” ) ; _ _ _ _ _ _
src: url(” https :// yoursite . com / css / fonts / CustomFont . woff “) định dạng(“woff”),
url(” https :// yoursite . com / css / fonts / CustomFont . otf “) định dạng (“mở loại”),
url(” https :// trang web của bạn . com / css / fonts / CustomFont . svg # tên tệp “) định dạng(“svg”);
}

Khi bạn đã cập nhật tệp CSS, bạn cần tải tệp đó lên trang web (máy chủ) của mình.

Bước 5: Sử dụng phông chữ tùy chỉnh trong khai báo CSS của bạn

Bây giờ, các tệp phông chữ và Biểu định kiểu xếp tầng của bạn đã được tải lên máy chủ của bạn, bạn có thể bắt đầu sử dụng phông chữ tùy chỉnh của mình trong các khai báo CSS để giúp cải thiện giao diện của HTML.

Điều này có thể được thực hiện theo nhiều cách, bao gồm thêm các khai báo trên toàn trang vào tệp CSS chính của bạn.

2. Cách thêm phông chữ trong các công cụ xây dựng trang web phổ biến

a, Hệ thống quản lý nội dung (WordPress, Drupal, Joomla, v.v.)

Có một số cách khác nhau để bạn có thể thêm phông chữ tùy chỉnh vào Hệ thống quản lý nội dung (CMS) như  WordPress (WP) :

Thêm phông chữ tùy chỉnh bằng @font-face CSSThêm phông chữ bằng  plugin WordPress  Thêm phông chữ từ  Google Fonts theo cách thủ công

Nói chung, quy trình 5 bước hiển thị ở trên sẽ là cách tiếp cận mặc định khi thêm phông chữ tùy chỉnh vào CMS. Mặc dù quá trình này có vẻ khá đơn giản đối với những người có kinh nghiệm thao tác mã, nhưng những người dùng mới làm quen thường sẽ tìm kiếm một giải pháp thay thế.

Nếu bạn đang sử dụng WP và không có kinh nghiệm chỉnh sửa mã nguồn (tệp chủ đề), rất có thể bạn sẽ muốn dựa vào plugin  kiểu chữ . Plugin giúp việc thêm phông chữ tùy chỉnh dễ dàng hơn mà không cần phải tự viết bất kỳ mã nào.

Điều duy nhất tôi thận trọng khi sử dụng plugin WP là chúng có thể gây ra nhiều  sự cố  trên trang web của bạn. Điều quan trọng là luôn nghiên cứu các plugin trước khi sử dụng chúng trên trang web của bạn.

Cuối cùng, vì Google Fonts cung cấp API dành cho nhà phát triển, bạn cũng có thể chọn “ thêm thủ công ” các phông chữ đó vào chủ đề của mình bằng cách sử dụng tệp tin.php.

b, Trình tạo trang web (Pagecloud, Squarespace, Wix, Weebly)

Có rất nhiều tùy chọn xây dựng trang web trực tuyến quản lý phông chữ tùy chỉnh theo những cách khác nhau. 

c, Phông chữ của Google

Phần lớn, các công cụ xây dựng trang web hàng đầu giúp dễ dàng thêm phông chữ từ các trang web phổ biến như Google Fonts.

Tuy nhiên, không phải tất cả các công cụ xây dựng trang web đều giúp việc thêm Google Font trở nên dễ dàng như vậy.

Tóm lại:

Trên đây là toàn bộ những kiến thức, kinh nghiệm mà Minastik đã tìm hiểu được về cách thêm phông chữ vào trang web. Qua bài viết này Minastik mong rằng sẽ góp được phần nào trong việc xây dựng trang web của bạn. Chúc bạn thành công.